glyphcss 0.0.2 → 0.0.3
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/elements.cjs +1 -1
- package/dist/elements.js +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/dist/elements.cjs
CHANGED
|
@@ -59,4 +59,4 @@
|
|
|
59
59
|
the content from the 3D vertex being labelled. */
|
|
60
60
|
transform: translate(-50%, -50%);
|
|
61
61
|
}
|
|
62
|
-
`;function Ne(n,t,e,o,r){return n.map(a=>{let[i,s,c]=t.project(a.at,e,o,r),l=c>-3&&i>=0&&i<e&&s>=0&&s<o;return{id:a.id,col:i,row:s,depth:c,visible:l}})}var bt=1;function vt(n,t){let{position:e,scale:o,rotation:r}=t;if(!e&&!o&&!r)return n;let[a,i,s]=e??[0,0,0],c=1,l=1,p=1;o!==void 0&&(typeof o=="number"?c=l=p=o:[c,l,p]=o);let[h,f,y]=r??[0,0,0],g=Math.cos(h),L=Math.sin(h),E=Math.cos(f),w=Math.sin(f),x=Math.cos(y),M=Math.sin(y);function C(d){let b=d[0]*c,u=d[1]*l,v=d[2]*p,A=x*b-M*u,G=M*b+x*u,m=v;return b=E*A+w*m,u=G,v=-w*A+E*m,A=b,G=g*u-L*v,m=L*u+g*v,[A+a,G+i,m+s]}return n.map(d=>({...d,vertices:d.vertices.map(C)}))}function Ye(n,t={}){Ie(n.ownerDocument??void 0);let e={mode:t.mode??"solid",glyphPalette:t.glyphPalette??"default",useColors:t.useColors??!0,cols:t.cols??80,rows:t.rows??24,cellAspect:t.cellAspect??2,directionalLight:t.directionalLight??{direction:[.5,.7,.5],intensity:1},ambientLight:t.ambientLight??{intensity:.4},camera:t.camera??le(),smoothShading:t.smoothShading??!1,creaseAngle:t.creaseAngle??60,autoSize:t.autoSize??!1},o=n.ownerDocument.createElement("div");o.className="glyph-scene";let r=n.ownerDocument.createElement("pre");r.className="glyph-output";let a=n.ownerDocument.createElement("div");a.className="glyph-hotspot-layer",o.appendChild(r),o.appendChild(a),n.appendChild(o);let i=new Map,s=[],c=!1;function l(){c||(c=!0,Promise.resolve().then(()=>{c=!1,p()}))}function p(){let d=[];for(let v of i.values()){let A=vt(v.polygons,v.transform);for(let G of A)d.push(G)}let b=Oe({camera:e.camera,grid:{cols:e.cols,rows:e.rows,cellAspect:e.cellAspect},polygons:d,mode:e.mode,directionalLight:e.directionalLight,ambientLight:e.ambientLight,glyphPalette:e.glyphPalette,useColors:e.useColors,smoothShading:e.smoothShading,creaseAngle:e.creaseAngle}),u=Re(b);e.useColors?r.innerHTML=u:r.textContent=u,h()}function h(){let{cols:d,rows:b,cellAspect:u,camera:v}=e,A=Ne(s.map(S=>S.hotspot),v,d,b,u),G=r.getBoundingClientRect(),m=d>0?G.width/d:8,_=b>0?G.height/b:16;for(let S=0;S<s.length;S++){let{el:T}=s[S],z=A[S];z.visible?(T.style.display="",T.style.left=`${(z.col+.5)*m}px`,T.style.top=`${(z.row+.5)*_}px`,T.style.zIndex=String(Math.round(z.depth*1e3))):T.style.display="none"}}function f(d,b={}){let u=bt++;return i.set(u,{id:u,polygons:d,transform:b}),l(),{get id(){return u},get name(){return i.get(u)?.transform.id},get polygons(){return d},setTransform(v){let A=i.get(u);A&&(A.transform=v,l())},dispose(){i.delete(u),l()}}}function y(d,b){let u=n.ownerDocument.createElement("div");u.className="glyph-hotspot",u.setAttribute("data-hotspot-id",d.id);let[v,A]=d.size??[1,1];u.style.position="absolute",u.style.width=`${v}ch`,u.style.height=`${A*e.cellAspect}ch`,b&&u.addEventListener("click",b),a.appendChild(u);let G={hotspot:{id:d.id,at:d.at,size:d.size},el:u,onClick:b};return s.push(G),l(),{get el(){return u},remove(){let m=s.indexOf(G);m>=0&&s.splice(m,1),b&&u.removeEventListener("click",b),a.removeChild(u),l()}}}function g(){p()}function L(d){d.mode!==void 0&&(e.mode=d.mode),d.glyphPalette!==void 0&&(e.glyphPalette=d.glyphPalette),d.useColors!==void 0&&(e.useColors=d.useColors),d.cols!==void 0&&(e.cols=d.cols),d.rows!==void 0&&(e.rows=d.rows),d.cellAspect!==void 0&&(e.cellAspect=d.cellAspect),d.directionalLight!==void 0&&(e.directionalLight=d.directionalLight),d.ambientLight!==void 0&&(e.ambientLight=d.ambientLight),d.camera!==void 0&&(e.camera=d.camera),d.smoothShading!==void 0&&(e.smoothShading=d.smoothShading),d.creaseAngle!==void 0&&(e.creaseAngle=d.creaseAngle),d.autoSize!==void 0&&(e.autoSize=d.autoSize,e.autoSize&&!M&&typeof ResizeObserver<"u"?(M=new ResizeObserver(()=>x()),M.observe(n),x()):!e.autoSize&&M&&(M.disconnect(),M=null)),l()}function E(){return{...e}}function w(){let d=n.ownerDocument.createElement("span");d.textContent="M",d.style.cssText="position:absolute;visibility:hidden;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;padding:0;margin:0",r.appendChild(d);let b=d.getBoundingClientRect();return d.remove(),{w:b.width||8,h:b.height||16}}function x(){let d=n.clientWidth,b=n.clientHeight;if(!d||!b)return;let u=w(),v=Math.max(20,Math.floor(d/u.w)),A=Math.max(8,Math.floor(b/u.h)),G=u.h/u.w,m=!1;e.cols!==v&&(e.cols=v,m=!0),e.rows!==A&&(e.rows=A,m=!0),Math.abs(e.cellAspect-G)>.01&&(e.cellAspect=G,m=!0),m&&l()}let M=null;e.autoSize&&typeof ResizeObserver<"u"&&(M=new ResizeObserver(()=>x()),M.observe(n),x());function C(){M&&(M.disconnect(),M=null),i.clear(),n.contains(o)&&n.removeChild(o)}return l(),{get host(){return n},get output(){return r},get camera(){return e.camera},add:f,addHotspot:y,rerender:g,setOptions:L,getOptions:E,fit:x,destroy:C}}var Et=typeof HTMLElement<"u"?HTMLElement:class{},Mt=["mode","glyph-palette","use-colors","cols","rows","cell-aspect","directional-direction","directional-intensity","ambient-intensity","auto-size"];function J(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function At(n){if(n==="wireframe"||n==="solid"||n==="voxel")return n}function Ct(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}var Q=class extends Et{constructor(){super(...arguments);this._scene=null}static get observedAttributes(){return[...Mt]}getScene(){return this._scene}_readOptions(){let e={},o=At(this.getAttribute("mode"));o!==void 0&&(e.mode=o);let r=this.getAttribute("glyph-palette");r&&(e.glyphPalette=r);let a=Ct(this.getAttribute("use-colors"));a!==void 0&&(e.useColors=a);let i=J(this.getAttribute("cols"));i!==void 0&&(e.cols=i);let s=J(this.getAttribute("rows"));s!==void 0&&(e.rows=s);let c=J(this.getAttribute("cell-aspect"));c!==void 0&&(e.cellAspect=c);let l=J(this.getAttribute("directional-intensity"));l!==void 0&&(e.directionalLight={direction:[.5,.7,.5],intensity:l});let p=J(this.getAttribute("ambient-intensity"));return p!==void 0&&(e.ambientLight={intensity:p}),this.hasAttribute("auto-size")&&(e.autoSize=!0),e}_findCameraAncestor(){let e=this.parentElement;for(;e;){let o=e.tagName.toLowerCase();if(o==="glyph-perspective-camera"||o==="glyph-orthographic-camera")return e;e=e.parentElement}return null}_initScene(e){let o=typeof e.getCamera=="function"?e.getCamera():void 0,r=this._readOptions();o&&(r.camera=o),this._scene=Ye(this,r),this.dispatchEvent(new CustomEvent("glyphcss:scene-ready",{bubbles:!1}))}connectedCallback(){if(this._scene)return;let e=this._findCameraAncestor();if(!e)throw new Error("glyphcss: <glyph-scene> must be placed inside a <glyph-perspective-camera> or <glyph-orthographic-camera>.");if((typeof e.getCamera=="function"?e.getCamera():null)!==null)this._initScene(e);else{let r=()=>{e.removeEventListener("glyph:camera-ready",r),this._scene||this._initScene(e)};e.addEventListener("glyph:camera-ready",r)}}rerender(){this._scene?.rerender()}disconnectedCallback(){this._scene&&(this._scene.destroy(),this._scene=null)}attributeChangedCallback(e,o,r){o!==r&&this._scene&&this._scene.setOptions(this._readOptions())}};var $=require("@glyphcss/core"),Gt=typeof HTMLElement<"u"?HTMLElement:class{},xt=["src","geometry","size","color","position","scale","rotation","normalize"];function Lt(n){let t=(0,$.computeSceneBbox)(n),e=(t.min[0]+t.max[0])/2,o=(t.min[1]+t.max[1])/2,r=(t.min[2]+t.max[2])/2,i=2/(Math.max(t.max[0]-t.min[0],t.max[1]-t.min[1],t.max[2]-t.min[2])||1);return n.map(s=>({...s,vertices:s.vertices.map(c=>[(c[0]-e)*i,(c[1]-o)*i,(c[2]-r)*i])}))}function Ge(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function wt(n){if(n){if(!n.includes(",")){let t=parseFloat(n);return Number.isFinite(t)?t:void 0}return Ge(n)}}function _t(n){return n.closest("glyph-scene")??null}var ee=class extends Gt{constructor(){super(...arguments);this._handle=null;this._loadToken=0}static get observedAttributes(){return[...xt]}getMeshHandle(){return this._handle}connectedCallback(){this._maybeLoad()}disconnectedCallback(){this._tearDown()}attributeChangedCallback(e,o,r){if(o!==r){if(e==="src"||e==="geometry"||e==="size"||e==="color"){this._tearDown(),this._maybeLoad();return}this._handle&&this._handle.setTransform(this._readTransform())}}_readTransform(){return{position:Ge(this.getAttribute("position")),scale:wt(this.getAttribute("scale")),rotation:Ge(this.getAttribute("rotation"))}}_tearDown(){if(this._loadToken+=1,this._handle){try{this._handle.dispose()}catch{}this._handle=null}}async _maybeLoad(){let e=this.getAttribute("src"),o=this.getAttribute("geometry"),r=_t(this);if(r){if(!r.getScene()){let a=()=>{r.removeEventListener("glyphcss:scene-ready",a),this._maybeLoad()};r.addEventListener("glyphcss:scene-ready",a);return}if(e){let a=++this._loadToken,i;try{i=await(0,$.loadMesh)(e)}catch(p){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:p,bubbles:!0}));return}if(a!==this._loadToken){try{i.dispose()}catch{}return}let s=r.getScene();if(!s){try{i.dispose()}catch{}return}let l=this.hasAttribute("normalize")?Lt(i.polygons):i.polygons;this._handle=s.add(l,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:l},bubbles:!0}));return}if(o){let a=r.getScene();if(!a)return;let i=this.getAttribute("size"),s=i!==null?parseFloat(i):1,c=this.getAttribute("color")??void 0,l;try{l=(0,$.resolveGeometry)(o,{size:Number.isFinite(s)?s:1,color:c})}catch(p){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:p,bubbles:!0}));return}this._handle=a.add(l,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:l},bubbles:!0}))}}}};var St=typeof HTMLElement<"u"?HTMLElement:class{};function zt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function Tt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==2||t.some(e=>!Number.isFinite(e))))return[t[0],t[1]]}function Ht(n){return n.closest("glyph-scene")??null}var te=class extends St{constructor(){super(...arguments);this._handle=null}static get observedAttributes(){return["at","size","hotspot-id"]}connectedCallback(){this._register()}disconnectedCallback(){this._handle&&this._unregister()}attributeChangedCallback(e,o,r){o!==r&&(this._handle&&this._unregister(),this._register())}_unregister(){if(!this._handle)return;let e=this._handle.el;for(;e.firstChild;)this.appendChild(e.firstChild);this._handle.remove(),this._handle=null}_register(){let e=zt(this.getAttribute("at"));if(!e)return;let o=Ht(this);if(!o)return;if(!o.getScene()){let c=()=>{o.removeEventListener("glyphcss:scene-ready",c),this._register()};o.addEventListener("glyphcss:scene-ready",c);return}let r=o.getScene();if(!r)return;let a=this.getAttribute("hotspot-id")??this.getAttribute("id")??String(Math.random()),i=Tt(this.getAttribute("size"));this._handle=r.addHotspot({id:a,at:e,size:i},()=>this.dispatchEvent(new CustomEvent("glyphcss:hotspot-click",{detail:{id:a},bubbles:!0})));let s=this._handle.el;for(;this.firstChild;)s.appendChild(this.firstChild)}};var Pt=typeof HTMLElement<"u"?HTMLElement:class{};function k(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var ne=class extends Pt{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","distance","zoom","stretch"]}getCamera(){return this._camera}connectedCallback(){this._camera=le({rotX:k(this.getAttribute("rot-x")),rotY:k(this.getAttribute("rot-y")),distance:k(this.getAttribute("distance")),zoom:k(this.getAttribute("zoom")),stretch:k(this.getAttribute("stretch"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let a=this._camera;if(!a)return;let i=k(this.getAttribute("rot-x")),s=k(this.getAttribute("rot-y")),c=k(this.getAttribute("distance")),l=k(this.getAttribute("zoom")),p=k(this.getAttribute("stretch")),h=!1;i!==void 0&&a.rotX!==i&&(a.rotX=i,h=!0),s!==void 0&&a.rotY!==s&&(a.rotY=s,h=!0),c!==void 0&&a.distance!==c&&(a.distance=c,h=!0),l!==void 0&&a.zoom!==l&&(a.zoom=l,h=!0),p!==void 0&&a.stretch!==p&&(a.stretch=p,h=!0),h&&this.querySelector("glyph-scene")?.rerender?.()}};var Ot=typeof HTMLElement<"u"?HTMLElement:class{};function W(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var j=class extends Ot{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","zoom"]}getCamera(){return this._camera}connectedCallback(){this._camera=Pe({rotX:W(this.getAttribute("rot-x")),rotY:W(this.getAttribute("rot-y")),zoom:W(this.getAttribute("zoom"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let a=this._camera;if(!a)return;let i=W(this.getAttribute("rot-x")),s=W(this.getAttribute("rot-y")),c=W(this.getAttribute("zoom")),l=!1;i!==void 0&&a.rotX!==i&&(a.rotX=i,l=!0),s!==void 0&&a.rotY!==s&&(a.rotY=s,l=!0),c!==void 0&&a.zoom!==c&&(a.zoom=c,l=!0),l&&this.querySelector("glyph-scene")?.rerender?.()}};function Fe(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,a=Xe(t.invert),i=t.animate??!1,s=!1,c=!1,l=null,p=null,h=null,f={x:0,y:0},y=n.camera;function g(u){if(!(!o||s)&&h===null&&u.isPrimary!==!1){u.preventDefault(),h=u.pointerId,f={x:u.clientX,y:u.clientY},e.style.cursor="grabbing";try{u.target.setPointerCapture(u.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(c=!0)}}function L(u){if(h===null||u.pointerId!==h||!o||s)return;u.preventDefault();let v=u.clientX-f.x,A=u.clientY-f.y;f={x:u.clientX,y:u.clientY};let G=a,_=1/4*Math.PI/180;y.rotY=y.rotY-v*_*G,y.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,y.rotX-A*_*G)),n.rerender()}function E(u){if(h===u.pointerId){h=null,e.style.cursor=o&&!s?"grab":"";try{u.target.releasePointerCapture(u.pointerId)}catch{}i&&(c=!1)}}function w(u){if(!r||s)return;u.preventDefault();let v=u.deltaY*.001;y.zoom=Math.max(.05,Math.min(10,y.zoom*(1-v))),n.rerender()}function x(u){if(!(s||!i)){if(!c){let v=p!==null?Math.min(u-p,50):16.67,A=typeof i=="object"&&i.speed?i.speed:.3,G=typeof i=="object"&&i.axis?i.axis:"y",m=A*(Math.PI/180)*(v/16.67);G==="y"?y.rotY=y.rotY+m:y.rotX=y.rotX+m,n.rerender()}p=u,l=requestAnimationFrame(x)}}function M(){l===null&&typeof requestAnimationFrame<"u"&&i&&(l=requestAnimationFrame(x))}function C(){l!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l),l=null),p=null}function d(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),e.addEventListener("wheel",w,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.removeEventListener("wheel",w),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return d(),M(),{update(u){let v=!!i;o=u.drag??o,r=u.wheel??r,a=Xe(u.invert),i=u.animate??i,!s&&h===null&&(e.style.cursor=o?"grab":"");let A=!!i;v&&!A?C():!v&&A&&M()},pause(){s||(s=!0,b(),C(),h=null,c=!1)},resume(){s&&(s=!1,d(),M())},destroy(){s||b(),C(),s=!0}}}function Xe(n){return n===void 0||n===!1?1:n===!0?-1:n}var Rt=typeof HTMLElement<"u"?HTMLElement:class{};function kt(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function xe(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function It(n){return n.closest("glyph-scene")??null}var re=class extends Rt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert","animate-speed","animate-axis"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=xe(this.getAttribute("drag")),o=xe(this.getAttribute("wheel")),r=xe(this.getAttribute("invert")),a=kt(this.getAttribute("animate-speed")),i=this.getAttribute("animate-axis")==="x"?"x":"y";return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{},...a!==void 0?{animate:{speed:a,axis:i}}:{}}}_attach(){if(this._controls)return;let e=It(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Fe(o,this._readOptions())}};function Ve(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,a=De(t.invert),i=t.animate??!1,s=!1,c=!1,l=null,p=null,h=null,f={x:0,y:0},y=!1,g=n.camera,L=1/4*Math.PI/180,E=.02;function w(m){if(!(!o||s)&&h===null&&m.isPrimary!==!1){m.preventDefault(),h=m.pointerId,f={x:m.clientX,y:m.clientY},y=m.button===2,e.style.cursor="grabbing";try{m.target.setPointerCapture(m.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(c=!0)}}function x(m){if(h===null||m.pointerId!==h||!o||s)return;m.preventDefault();let _=m.clientX-f.x,S=m.clientY-f.y;f={x:m.clientX,y:m.clientY};let T=a;if(y||m.shiftKey)g.rotY=g.rotY-_*L*T,g.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,g.rotX+S*L*T));else{let z=g.target;g.target=[z[0]-_*E/g.zoom,z[1]-S*E/g.zoom,z[2]]}n.rerender()}function M(m){if(h===m.pointerId){h=null,y=!1,e.style.cursor=o&&!s?"grab":"";try{m.target.releasePointerCapture(m.pointerId)}catch{}i&&(c=!1)}}function C(m){m.preventDefault()}function d(m){if(!r||s)return;m.preventDefault();let _=m.deltaY*.001;g.zoom=Math.max(.05,Math.min(10,g.zoom*(1-_))),n.rerender()}function b(m){if(!(s||!i)){if(!c){let _=p!==null?Math.min(m-p,50):16.67,S=typeof i=="object"&&i.speed?i.speed:.3,T=typeof i=="object"&&i.axis?i.axis:"y",z=S*(Math.PI/180)*(_/16.67);T==="y"?g.rotY=g.rotY+z:g.rotX=g.rotX+z,n.rerender()}p=m,l=requestAnimationFrame(b)}}function u(){l===null&&typeof requestAnimationFrame<"u"&&i&&(l=requestAnimationFrame(b))}function v(){l!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l),l=null),p=null}function A(){e.addEventListener("pointerdown",w),e.addEventListener("pointermove",x),e.addEventListener("pointerup",M),e.addEventListener("pointercancel",M),e.addEventListener("contextmenu",C),e.addEventListener("wheel",d,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function G(){e.removeEventListener("pointerdown",w),e.removeEventListener("pointermove",x),e.removeEventListener("pointerup",M),e.removeEventListener("pointercancel",M),e.removeEventListener("contextmenu",C),e.removeEventListener("wheel",d),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return A(),u(),{update(m){let _=!!i;o=m.drag??o,r=m.wheel??r,a=De(m.invert),i=m.animate??i,!s&&h===null&&(e.style.cursor=o?"grab":"");let S=!!i;_&&!S?v():!_&&S&&u()},pause(){s||(s=!0,G(),v(),h=null,c=!1)},resume(){s&&(s=!1,A(),u())},destroy(){s||G(),v(),s=!0}}}function De(n){return n===void 0||n===!1?1:n===!0?-1:n}var Nt=typeof HTMLElement<"u"?HTMLElement:class{};function Le(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Yt(n){return n.closest("glyph-scene")??null}var oe=class extends Nt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Le(this.getAttribute("drag")),o=Le(this.getAttribute("wheel")),r=Le(this.getAttribute("invert"));return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{}}}_attach(){if(this._controls)return;let e=Yt(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Ve(o,this._readOptions())}};if(typeof customElements<"u"){if(customElements.get("glyph-scene")||customElements.define("glyph-scene",Q),customElements.get("glyph-mesh")||customElements.define("glyph-mesh",ee),customElements.get("glyph-hotspot")||customElements.define("glyph-hotspot",te),customElements.get("glyph-perspective-camera")||customElements.define("glyph-perspective-camera",ne),customElements.get("glyph-orthographic-camera")||customElements.define("glyph-orthographic-camera",j),!customElements.get("glyph-camera")){class n extends j{}customElements.define("glyph-camera",n)}customElements.get("glyph-orbit-controls")||customElements.define("glyph-orbit-controls",re),customElements.get("glyph-map-controls")||customElements.define("glyph-map-controls",oe)}0&&(module.exports={GlyphHotspotElement,GlyphMapControlsElement,GlyphMeshElement,GlyphOrbitControlsElement,GlyphOrthographicCameraElement,GlyphPerspectiveCameraElement,GlyphSceneElement});
|
|
62
|
+
`;function Ne(n,t,e,o,r){return n.map(a=>{let[i,s,c]=t.project(a.at,e,o,r),l=c>-3&&i>=0&&i<e&&s>=0&&s<o;return{id:a.id,col:i,row:s,depth:c,visible:l}})}var bt=1;function vt(n,t){let{position:e,scale:o,rotation:r}=t;if(!e&&!o&&!r)return n;let[a,i,s]=e??[0,0,0],c=1,l=1,p=1;o!==void 0&&(typeof o=="number"?c=l=p=o:[c,l,p]=o);let[h,f,y]=r??[0,0,0],g=Math.cos(h),L=Math.sin(h),E=Math.cos(f),w=Math.sin(f),x=Math.cos(y),M=Math.sin(y);function C(d){let b=d[0]*c,u=d[1]*l,v=d[2]*p,A=x*b-M*u,G=M*b+x*u,m=v;return b=E*A+w*m,u=G,v=-w*A+E*m,A=b,G=g*u-L*v,m=L*u+g*v,[A+a,G+i,m+s]}return n.map(d=>({...d,vertices:d.vertices.map(C)}))}function Ye(n,t={}){Ie(n.ownerDocument??void 0);let e={mode:t.mode??"solid",glyphPalette:t.glyphPalette??"default",useColors:t.useColors??!0,cols:t.cols??80,rows:t.rows??24,cellAspect:t.cellAspect??2,directionalLight:t.directionalLight??{direction:[.5,.7,.5],intensity:1},ambientLight:t.ambientLight??{intensity:.4},camera:t.camera??le(),smoothShading:t.smoothShading??!1,creaseAngle:t.creaseAngle??60,autoSize:t.autoSize??!1},o=n.ownerDocument.createElement("div");o.className="glyph-scene";let r=n.ownerDocument.createElement("pre");r.className="glyph-output";let a=n.ownerDocument.createElement("div");a.className="glyph-hotspot-layer",o.appendChild(r),o.appendChild(a),n.appendChild(o);let i=new Map,s=[],c=!1;function l(){c||(c=!0,Promise.resolve().then(()=>{c=!1,p()}))}function p(){let d=[];for(let v of i.values()){let A=vt(v.polygons,v.transform);for(let G of A)d.push(G)}let b=Oe({camera:e.camera,grid:{cols:e.cols,rows:e.rows,cellAspect:e.cellAspect},polygons:d,mode:e.mode,directionalLight:e.directionalLight,ambientLight:e.ambientLight,glyphPalette:e.glyphPalette,useColors:e.useColors,smoothShading:e.smoothShading,creaseAngle:e.creaseAngle}),u=Re(b);e.useColors?r.innerHTML=u:r.textContent=u,h()}function h(){let{cols:d,rows:b,cellAspect:u,camera:v}=e,A=Ne(s.map(S=>S.hotspot),v,d,b,u),G=r.getBoundingClientRect(),m=d>0?G.width/d:8,_=b>0?G.height/b:16;for(let S=0;S<s.length;S++){let{el:T}=s[S],z=A[S];z.visible?(T.style.display="",T.style.left=`${(z.col+.5)*m}px`,T.style.top=`${(z.row+.5)*_}px`,T.style.zIndex=String(Math.round(z.depth*1e3))):T.style.display="none"}}function f(d,b={}){let u=bt++;return i.set(u,{id:u,polygons:d,transform:b}),l(),{get id(){return u},get name(){return i.get(u)?.transform.id},get polygons(){return d},setTransform(v){let A=i.get(u);A&&(A.transform=v,l())},dispose(){i.delete(u),l()}}}function y(d,b){let u=n.ownerDocument.createElement("div");u.className="glyph-hotspot",u.setAttribute("data-hotspot-id",d.id);let[v,A]=d.size??[1,1];u.style.position="absolute",u.style.width=`${v}ch`,u.style.height=`${A*e.cellAspect}ch`,b&&u.addEventListener("click",b),a.appendChild(u);let G={hotspot:{id:d.id,at:d.at,size:d.size},el:u,onClick:b};return s.push(G),l(),{get el(){return u},remove(){let m=s.indexOf(G);m>=0&&s.splice(m,1),b&&u.removeEventListener("click",b),a.removeChild(u),l()}}}function g(){p()}function L(d){d.mode!==void 0&&(e.mode=d.mode),d.glyphPalette!==void 0&&(e.glyphPalette=d.glyphPalette),d.useColors!==void 0&&(e.useColors=d.useColors),d.cols!==void 0&&(e.cols=d.cols),d.rows!==void 0&&(e.rows=d.rows),d.cellAspect!==void 0&&(e.cellAspect=d.cellAspect),d.directionalLight!==void 0&&(e.directionalLight=d.directionalLight),d.ambientLight!==void 0&&(e.ambientLight=d.ambientLight),d.camera!==void 0&&(e.camera=d.camera),d.smoothShading!==void 0&&(e.smoothShading=d.smoothShading),d.creaseAngle!==void 0&&(e.creaseAngle=d.creaseAngle),d.autoSize!==void 0&&(e.autoSize=d.autoSize,e.autoSize&&!M&&typeof ResizeObserver<"u"?(M=new ResizeObserver(()=>x()),M.observe(n),x()):!e.autoSize&&M&&(M.disconnect(),M=null)),l()}function E(){return{...e}}function w(){let d=n.ownerDocument.createElement("span");d.textContent="M",d.style.cssText="position:absolute;visibility:hidden;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;padding:0;margin:0",r.appendChild(d);let b=d.getBoundingClientRect();return d.remove(),{w:b.width||8,h:b.height||16}}function x(){let d=n.clientWidth,b=n.clientHeight;if(!d||!b)return;let u=w(),v=Math.max(20,Math.floor(d/u.w)),A=Math.max(8,Math.floor(b/u.h)),G=u.h/u.w,m=!1;e.cols!==v&&(e.cols=v,m=!0),e.rows!==A&&(e.rows=A,m=!0),Math.abs(e.cellAspect-G)>.01&&(e.cellAspect=G,m=!0),m&&l()}let M=null;e.autoSize&&typeof ResizeObserver<"u"&&(M=new ResizeObserver(()=>x()),M.observe(n),x());function C(){M&&(M.disconnect(),M=null),i.clear(),n.contains(o)&&n.removeChild(o)}return l(),{get host(){return n},get output(){return r},get camera(){return e.camera},add:f,addHotspot:y,rerender:g,setOptions:L,getOptions:E,fit:x,destroy:C}}var Et=typeof HTMLElement<"u"?HTMLElement:class{},Mt=["mode","glyph-palette","use-colors","cols","rows","cell-aspect","directional-direction","directional-intensity","ambient-intensity","auto-size"];function J(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function At(n){if(n==="wireframe"||n==="solid"||n==="voxel")return n}function Ct(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}var Q=class extends Et{constructor(){super(...arguments);this._scene=null}static get observedAttributes(){return[...Mt]}getScene(){return this._scene}_readOptions(){let e={},o=At(this.getAttribute("mode"));o!==void 0&&(e.mode=o);let r=this.getAttribute("glyph-palette");r&&(e.glyphPalette=r);let a=Ct(this.getAttribute("use-colors"));a!==void 0&&(e.useColors=a);let i=J(this.getAttribute("cols"));i!==void 0&&(e.cols=i);let s=J(this.getAttribute("rows"));s!==void 0&&(e.rows=s);let c=J(this.getAttribute("cell-aspect"));c!==void 0&&(e.cellAspect=c);let l=J(this.getAttribute("directional-intensity"));l!==void 0&&(e.directionalLight={direction:[.5,.7,.5],intensity:l});let p=J(this.getAttribute("ambient-intensity"));return p!==void 0&&(e.ambientLight={intensity:p}),this.hasAttribute("auto-size")&&(e.autoSize=!0),e}_findCameraAncestor(){let e=this.parentElement;for(;e;){let o=e.tagName.toLowerCase();if(o==="glyph-perspective-camera"||o==="glyph-orthographic-camera"||o==="glyph-camera")return e;e=e.parentElement}return null}_initScene(e){let o=typeof e.getCamera=="function"?e.getCamera():void 0,r=this._readOptions();o&&(r.camera=o),this._scene=Ye(this,r),this.dispatchEvent(new CustomEvent("glyphcss:scene-ready",{bubbles:!1}))}connectedCallback(){if(this._scene)return;let e=this._findCameraAncestor();if(!e)throw new Error("glyphcss: <glyph-scene> must be placed inside a <glyph-camera>, <glyph-perspective-camera>, or <glyph-orthographic-camera>.");if((typeof e.getCamera=="function"?e.getCamera():null)!==null)this._initScene(e);else{let r=()=>{e.removeEventListener("glyph:camera-ready",r),this._scene||this._initScene(e)};e.addEventListener("glyph:camera-ready",r)}}rerender(){this._scene?.rerender()}disconnectedCallback(){this._scene&&(this._scene.destroy(),this._scene=null)}attributeChangedCallback(e,o,r){o!==r&&this._scene&&this._scene.setOptions(this._readOptions())}};var $=require("@glyphcss/core"),Gt=typeof HTMLElement<"u"?HTMLElement:class{},xt=["src","geometry","size","color","position","scale","rotation","normalize"];function Lt(n){let t=(0,$.computeSceneBbox)(n),e=(t.min[0]+t.max[0])/2,o=(t.min[1]+t.max[1])/2,r=(t.min[2]+t.max[2])/2,i=2/(Math.max(t.max[0]-t.min[0],t.max[1]-t.min[1],t.max[2]-t.min[2])||1);return n.map(s=>({...s,vertices:s.vertices.map(c=>[(c[0]-e)*i,(c[1]-o)*i,(c[2]-r)*i])}))}function Ge(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function wt(n){if(n){if(!n.includes(",")){let t=parseFloat(n);return Number.isFinite(t)?t:void 0}return Ge(n)}}function _t(n){return n.closest("glyph-scene")??null}var ee=class extends Gt{constructor(){super(...arguments);this._handle=null;this._loadToken=0}static get observedAttributes(){return[...xt]}getMeshHandle(){return this._handle}connectedCallback(){this._maybeLoad()}disconnectedCallback(){this._tearDown()}attributeChangedCallback(e,o,r){if(o!==r){if(e==="src"||e==="geometry"||e==="size"||e==="color"){this._tearDown(),this._maybeLoad();return}this._handle&&this._handle.setTransform(this._readTransform())}}_readTransform(){return{position:Ge(this.getAttribute("position")),scale:wt(this.getAttribute("scale")),rotation:Ge(this.getAttribute("rotation"))}}_tearDown(){if(this._loadToken+=1,this._handle){try{this._handle.dispose()}catch{}this._handle=null}}async _maybeLoad(){let e=this.getAttribute("src"),o=this.getAttribute("geometry"),r=_t(this);if(r){if(!r.getScene()){let a=()=>{r.removeEventListener("glyphcss:scene-ready",a),this._maybeLoad()};r.addEventListener("glyphcss:scene-ready",a);return}if(e){let a=++this._loadToken,i;try{i=await(0,$.loadMesh)(e)}catch(p){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:p,bubbles:!0}));return}if(a!==this._loadToken){try{i.dispose()}catch{}return}let s=r.getScene();if(!s){try{i.dispose()}catch{}return}let l=this.hasAttribute("normalize")?Lt(i.polygons):i.polygons;this._handle=s.add(l,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:l},bubbles:!0}));return}if(o){let a=r.getScene();if(!a)return;let i=this.getAttribute("size"),s=i!==null?parseFloat(i):1,c=this.getAttribute("color")??void 0,l;try{l=(0,$.resolveGeometry)(o,{size:Number.isFinite(s)?s:1,color:c})}catch(p){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:p,bubbles:!0}));return}this._handle=a.add(l,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:l},bubbles:!0}))}}}};var St=typeof HTMLElement<"u"?HTMLElement:class{};function zt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function Tt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==2||t.some(e=>!Number.isFinite(e))))return[t[0],t[1]]}function Ht(n){return n.closest("glyph-scene")??null}var te=class extends St{constructor(){super(...arguments);this._handle=null}static get observedAttributes(){return["at","size","hotspot-id"]}connectedCallback(){this._register()}disconnectedCallback(){this._handle&&this._unregister()}attributeChangedCallback(e,o,r){o!==r&&(this._handle&&this._unregister(),this._register())}_unregister(){if(!this._handle)return;let e=this._handle.el;for(;e.firstChild;)this.appendChild(e.firstChild);this._handle.remove(),this._handle=null}_register(){let e=zt(this.getAttribute("at"));if(!e)return;let o=Ht(this);if(!o)return;if(!o.getScene()){let c=()=>{o.removeEventListener("glyphcss:scene-ready",c),this._register()};o.addEventListener("glyphcss:scene-ready",c);return}let r=o.getScene();if(!r)return;let a=this.getAttribute("hotspot-id")??this.getAttribute("id")??String(Math.random()),i=Tt(this.getAttribute("size"));this._handle=r.addHotspot({id:a,at:e,size:i},()=>this.dispatchEvent(new CustomEvent("glyphcss:hotspot-click",{detail:{id:a},bubbles:!0})));let s=this._handle.el;for(;this.firstChild;)s.appendChild(this.firstChild)}};var Pt=typeof HTMLElement<"u"?HTMLElement:class{};function k(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var ne=class extends Pt{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","distance","zoom","stretch"]}getCamera(){return this._camera}connectedCallback(){this._camera=le({rotX:k(this.getAttribute("rot-x")),rotY:k(this.getAttribute("rot-y")),distance:k(this.getAttribute("distance")),zoom:k(this.getAttribute("zoom")),stretch:k(this.getAttribute("stretch"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let a=this._camera;if(!a)return;let i=k(this.getAttribute("rot-x")),s=k(this.getAttribute("rot-y")),c=k(this.getAttribute("distance")),l=k(this.getAttribute("zoom")),p=k(this.getAttribute("stretch")),h=!1;i!==void 0&&a.rotX!==i&&(a.rotX=i,h=!0),s!==void 0&&a.rotY!==s&&(a.rotY=s,h=!0),c!==void 0&&a.distance!==c&&(a.distance=c,h=!0),l!==void 0&&a.zoom!==l&&(a.zoom=l,h=!0),p!==void 0&&a.stretch!==p&&(a.stretch=p,h=!0),h&&this.querySelector("glyph-scene")?.rerender?.()}};var Ot=typeof HTMLElement<"u"?HTMLElement:class{};function W(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var j=class extends Ot{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","zoom"]}getCamera(){return this._camera}connectedCallback(){this._camera=Pe({rotX:W(this.getAttribute("rot-x")),rotY:W(this.getAttribute("rot-y")),zoom:W(this.getAttribute("zoom"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let a=this._camera;if(!a)return;let i=W(this.getAttribute("rot-x")),s=W(this.getAttribute("rot-y")),c=W(this.getAttribute("zoom")),l=!1;i!==void 0&&a.rotX!==i&&(a.rotX=i,l=!0),s!==void 0&&a.rotY!==s&&(a.rotY=s,l=!0),c!==void 0&&a.zoom!==c&&(a.zoom=c,l=!0),l&&this.querySelector("glyph-scene")?.rerender?.()}};function Fe(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,a=Xe(t.invert),i=t.animate??!1,s=!1,c=!1,l=null,p=null,h=null,f={x:0,y:0},y=n.camera;function g(u){if(!(!o||s)&&h===null&&u.isPrimary!==!1){u.preventDefault(),h=u.pointerId,f={x:u.clientX,y:u.clientY},e.style.cursor="grabbing";try{u.target.setPointerCapture(u.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(c=!0)}}function L(u){if(h===null||u.pointerId!==h||!o||s)return;u.preventDefault();let v=u.clientX-f.x,A=u.clientY-f.y;f={x:u.clientX,y:u.clientY};let G=a,_=1/4*Math.PI/180;y.rotY=y.rotY-v*_*G,y.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,y.rotX-A*_*G)),n.rerender()}function E(u){if(h===u.pointerId){h=null,e.style.cursor=o&&!s?"grab":"";try{u.target.releasePointerCapture(u.pointerId)}catch{}i&&(c=!1)}}function w(u){if(!r||s)return;u.preventDefault();let v=u.deltaY*.001;y.zoom=Math.max(.05,Math.min(10,y.zoom*(1-v))),n.rerender()}function x(u){if(!(s||!i)){if(!c){let v=p!==null?Math.min(u-p,50):16.67,A=typeof i=="object"&&i.speed?i.speed:.3,G=typeof i=="object"&&i.axis?i.axis:"y",m=A*(Math.PI/180)*(v/16.67);G==="y"?y.rotY=y.rotY+m:y.rotX=y.rotX+m,n.rerender()}p=u,l=requestAnimationFrame(x)}}function M(){l===null&&typeof requestAnimationFrame<"u"&&i&&(l=requestAnimationFrame(x))}function C(){l!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l),l=null),p=null}function d(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),e.addEventListener("wheel",w,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.removeEventListener("wheel",w),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return d(),M(),{update(u){let v=!!i;o=u.drag??o,r=u.wheel??r,a=Xe(u.invert),i=u.animate??i,!s&&h===null&&(e.style.cursor=o?"grab":"");let A=!!i;v&&!A?C():!v&&A&&M()},pause(){s||(s=!0,b(),C(),h=null,c=!1)},resume(){s&&(s=!1,d(),M())},destroy(){s||b(),C(),s=!0}}}function Xe(n){return n===void 0||n===!1?1:n===!0?-1:n}var Rt=typeof HTMLElement<"u"?HTMLElement:class{};function kt(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function xe(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function It(n){return n.closest("glyph-scene")??null}var re=class extends Rt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert","animate-speed","animate-axis"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=xe(this.getAttribute("drag")),o=xe(this.getAttribute("wheel")),r=xe(this.getAttribute("invert")),a=kt(this.getAttribute("animate-speed")),i=this.getAttribute("animate-axis")==="x"?"x":"y";return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{},...a!==void 0?{animate:{speed:a,axis:i}}:{}}}_attach(){if(this._controls)return;let e=It(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Fe(o,this._readOptions())}};function Ve(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,a=De(t.invert),i=t.animate??!1,s=!1,c=!1,l=null,p=null,h=null,f={x:0,y:0},y=!1,g=n.camera,L=1/4*Math.PI/180,E=.02;function w(m){if(!(!o||s)&&h===null&&m.isPrimary!==!1){m.preventDefault(),h=m.pointerId,f={x:m.clientX,y:m.clientY},y=m.button===2,e.style.cursor="grabbing";try{m.target.setPointerCapture(m.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(c=!0)}}function x(m){if(h===null||m.pointerId!==h||!o||s)return;m.preventDefault();let _=m.clientX-f.x,S=m.clientY-f.y;f={x:m.clientX,y:m.clientY};let T=a;if(y||m.shiftKey)g.rotY=g.rotY-_*L*T,g.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,g.rotX+S*L*T));else{let z=g.target;g.target=[z[0]-_*E/g.zoom,z[1]-S*E/g.zoom,z[2]]}n.rerender()}function M(m){if(h===m.pointerId){h=null,y=!1,e.style.cursor=o&&!s?"grab":"";try{m.target.releasePointerCapture(m.pointerId)}catch{}i&&(c=!1)}}function C(m){m.preventDefault()}function d(m){if(!r||s)return;m.preventDefault();let _=m.deltaY*.001;g.zoom=Math.max(.05,Math.min(10,g.zoom*(1-_))),n.rerender()}function b(m){if(!(s||!i)){if(!c){let _=p!==null?Math.min(m-p,50):16.67,S=typeof i=="object"&&i.speed?i.speed:.3,T=typeof i=="object"&&i.axis?i.axis:"y",z=S*(Math.PI/180)*(_/16.67);T==="y"?g.rotY=g.rotY+z:g.rotX=g.rotX+z,n.rerender()}p=m,l=requestAnimationFrame(b)}}function u(){l===null&&typeof requestAnimationFrame<"u"&&i&&(l=requestAnimationFrame(b))}function v(){l!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l),l=null),p=null}function A(){e.addEventListener("pointerdown",w),e.addEventListener("pointermove",x),e.addEventListener("pointerup",M),e.addEventListener("pointercancel",M),e.addEventListener("contextmenu",C),e.addEventListener("wheel",d,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function G(){e.removeEventListener("pointerdown",w),e.removeEventListener("pointermove",x),e.removeEventListener("pointerup",M),e.removeEventListener("pointercancel",M),e.removeEventListener("contextmenu",C),e.removeEventListener("wheel",d),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return A(),u(),{update(m){let _=!!i;o=m.drag??o,r=m.wheel??r,a=De(m.invert),i=m.animate??i,!s&&h===null&&(e.style.cursor=o?"grab":"");let S=!!i;_&&!S?v():!_&&S&&u()},pause(){s||(s=!0,G(),v(),h=null,c=!1)},resume(){s&&(s=!1,A(),u())},destroy(){s||G(),v(),s=!0}}}function De(n){return n===void 0||n===!1?1:n===!0?-1:n}var Nt=typeof HTMLElement<"u"?HTMLElement:class{};function Le(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Yt(n){return n.closest("glyph-scene")??null}var oe=class extends Nt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Le(this.getAttribute("drag")),o=Le(this.getAttribute("wheel")),r=Le(this.getAttribute("invert"));return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{}}}_attach(){if(this._controls)return;let e=Yt(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Ve(o,this._readOptions())}};if(typeof customElements<"u"){if(customElements.get("glyph-scene")||customElements.define("glyph-scene",Q),customElements.get("glyph-mesh")||customElements.define("glyph-mesh",ee),customElements.get("glyph-hotspot")||customElements.define("glyph-hotspot",te),customElements.get("glyph-perspective-camera")||customElements.define("glyph-perspective-camera",ne),customElements.get("glyph-orthographic-camera")||customElements.define("glyph-orthographic-camera",j),!customElements.get("glyph-camera")){class n extends j{}customElements.define("glyph-camera",n)}customElements.get("glyph-orbit-controls")||customElements.define("glyph-orbit-controls",re),customElements.get("glyph-map-controls")||customElements.define("glyph-map-controls",oe)}0&&(module.exports={GlyphHotspotElement,GlyphMapControlsElement,GlyphMeshElement,GlyphOrbitControlsElement,GlyphOrthographicCameraElement,GlyphPerspectiveCameraElement,GlyphSceneElement});
|
package/dist/elements.js
CHANGED
|
@@ -59,4 +59,4 @@ function ze(n,t,e){let o=Math.cos(t),r=Math.sin(t),a=o*n[1]-r*n[0],i=r*n[1]+o*n[
|
|
|
59
59
|
the content from the 3D vertex being labelled. */
|
|
60
60
|
transform: translate(-50%, -50%);
|
|
61
61
|
}
|
|
62
|
-
`;function ke(n,t,e,o,r){return n.map(a=>{let[i,s,c]=t.project(a.at,e,o,r),l=c>-3&&i>=0&&i<e&&s>=0&&s<o;return{id:a.id,col:i,row:s,depth:c,visible:l}})}var ut=1;function dt(n,t){let{position:e,scale:o,rotation:r}=t;if(!e&&!o&&!r)return n;let[a,i,s]=e??[0,0,0],c=1,l=1,p=1;o!==void 0&&(typeof o=="number"?c=l=p=o:[c,l,p]=o);let[h,f,y]=r??[0,0,0],g=Math.cos(h),L=Math.sin(h),E=Math.cos(f),w=Math.sin(f),x=Math.cos(y),M=Math.sin(y);function C(d){let b=d[0]*c,u=d[1]*l,v=d[2]*p,A=x*b-M*u,G=M*b+x*u,m=v;return b=E*A+w*m,u=G,v=-w*A+E*m,A=b,G=g*u-L*v,m=L*u+g*v,[A+a,G+i,m+s]}return n.map(d=>({...d,vertices:d.vertices.map(C)}))}function Ie(n,t={}){Re(n.ownerDocument??void 0);let e={mode:t.mode??"solid",glyphPalette:t.glyphPalette??"default",useColors:t.useColors??!0,cols:t.cols??80,rows:t.rows??24,cellAspect:t.cellAspect??2,directionalLight:t.directionalLight??{direction:[.5,.7,.5],intensity:1},ambientLight:t.ambientLight??{intensity:.4},camera:t.camera??ee(),smoothShading:t.smoothShading??!1,creaseAngle:t.creaseAngle??60,autoSize:t.autoSize??!1},o=n.ownerDocument.createElement("div");o.className="glyph-scene";let r=n.ownerDocument.createElement("pre");r.className="glyph-output";let a=n.ownerDocument.createElement("div");a.className="glyph-hotspot-layer",o.appendChild(r),o.appendChild(a),n.appendChild(o);let i=new Map,s=[],c=!1;function l(){c||(c=!0,Promise.resolve().then(()=>{c=!1,p()}))}function p(){let d=[];for(let v of i.values()){let A=dt(v.polygons,v.transform);for(let G of A)d.push(G)}let b=He({camera:e.camera,grid:{cols:e.cols,rows:e.rows,cellAspect:e.cellAspect},polygons:d,mode:e.mode,directionalLight:e.directionalLight,ambientLight:e.ambientLight,glyphPalette:e.glyphPalette,useColors:e.useColors,smoothShading:e.smoothShading,creaseAngle:e.creaseAngle}),u=Pe(b);e.useColors?r.innerHTML=u:r.textContent=u,h()}function h(){let{cols:d,rows:b,cellAspect:u,camera:v}=e,A=ke(s.map(S=>S.hotspot),v,d,b,u),G=r.getBoundingClientRect(),m=d>0?G.width/d:8,_=b>0?G.height/b:16;for(let S=0;S<s.length;S++){let{el:T}=s[S],z=A[S];z.visible?(T.style.display="",T.style.left=`${(z.col+.5)*m}px`,T.style.top=`${(z.row+.5)*_}px`,T.style.zIndex=String(Math.round(z.depth*1e3))):T.style.display="none"}}function f(d,b={}){let u=ut++;return i.set(u,{id:u,polygons:d,transform:b}),l(),{get id(){return u},get name(){return i.get(u)?.transform.id},get polygons(){return d},setTransform(v){let A=i.get(u);A&&(A.transform=v,l())},dispose(){i.delete(u),l()}}}function y(d,b){let u=n.ownerDocument.createElement("div");u.className="glyph-hotspot",u.setAttribute("data-hotspot-id",d.id);let[v,A]=d.size??[1,1];u.style.position="absolute",u.style.width=`${v}ch`,u.style.height=`${A*e.cellAspect}ch`,b&&u.addEventListener("click",b),a.appendChild(u);let G={hotspot:{id:d.id,at:d.at,size:d.size},el:u,onClick:b};return s.push(G),l(),{get el(){return u},remove(){let m=s.indexOf(G);m>=0&&s.splice(m,1),b&&u.removeEventListener("click",b),a.removeChild(u),l()}}}function g(){p()}function L(d){d.mode!==void 0&&(e.mode=d.mode),d.glyphPalette!==void 0&&(e.glyphPalette=d.glyphPalette),d.useColors!==void 0&&(e.useColors=d.useColors),d.cols!==void 0&&(e.cols=d.cols),d.rows!==void 0&&(e.rows=d.rows),d.cellAspect!==void 0&&(e.cellAspect=d.cellAspect),d.directionalLight!==void 0&&(e.directionalLight=d.directionalLight),d.ambientLight!==void 0&&(e.ambientLight=d.ambientLight),d.camera!==void 0&&(e.camera=d.camera),d.smoothShading!==void 0&&(e.smoothShading=d.smoothShading),d.creaseAngle!==void 0&&(e.creaseAngle=d.creaseAngle),d.autoSize!==void 0&&(e.autoSize=d.autoSize,e.autoSize&&!M&&typeof ResizeObserver<"u"?(M=new ResizeObserver(()=>x()),M.observe(n),x()):!e.autoSize&&M&&(M.disconnect(),M=null)),l()}function E(){return{...e}}function w(){let d=n.ownerDocument.createElement("span");d.textContent="M",d.style.cssText="position:absolute;visibility:hidden;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;padding:0;margin:0",r.appendChild(d);let b=d.getBoundingClientRect();return d.remove(),{w:b.width||8,h:b.height||16}}function x(){let d=n.clientWidth,b=n.clientHeight;if(!d||!b)return;let u=w(),v=Math.max(20,Math.floor(d/u.w)),A=Math.max(8,Math.floor(b/u.h)),G=u.h/u.w,m=!1;e.cols!==v&&(e.cols=v,m=!0),e.rows!==A&&(e.rows=A,m=!0),Math.abs(e.cellAspect-G)>.01&&(e.cellAspect=G,m=!0),m&&l()}let M=null;e.autoSize&&typeof ResizeObserver<"u"&&(M=new ResizeObserver(()=>x()),M.observe(n),x());function C(){M&&(M.disconnect(),M=null),i.clear(),n.contains(o)&&n.removeChild(o)}return l(),{get host(){return n},get output(){return r},get camera(){return e.camera},add:f,addHotspot:y,rerender:g,setOptions:L,getOptions:E,fit:x,destroy:C}}var ht=typeof HTMLElement<"u"?HTMLElement:class{},pt=["mode","glyph-palette","use-colors","cols","rows","cell-aspect","directional-direction","directional-intensity","ambient-intensity","auto-size"];function Z(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function mt(n){if(n==="wireframe"||n==="solid"||n==="voxel")return n}function ft(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}var te=class extends ht{constructor(){super(...arguments);this._scene=null}static get observedAttributes(){return[...pt]}getScene(){return this._scene}_readOptions(){let e={},o=mt(this.getAttribute("mode"));o!==void 0&&(e.mode=o);let r=this.getAttribute("glyph-palette");r&&(e.glyphPalette=r);let a=ft(this.getAttribute("use-colors"));a!==void 0&&(e.useColors=a);let i=Z(this.getAttribute("cols"));i!==void 0&&(e.cols=i);let s=Z(this.getAttribute("rows"));s!==void 0&&(e.rows=s);let c=Z(this.getAttribute("cell-aspect"));c!==void 0&&(e.cellAspect=c);let l=Z(this.getAttribute("directional-intensity"));l!==void 0&&(e.directionalLight={direction:[.5,.7,.5],intensity:l});let p=Z(this.getAttribute("ambient-intensity"));return p!==void 0&&(e.ambientLight={intensity:p}),this.hasAttribute("auto-size")&&(e.autoSize=!0),e}_findCameraAncestor(){let e=this.parentElement;for(;e;){let o=e.tagName.toLowerCase();if(o==="glyph-perspective-camera"||o==="glyph-orthographic-camera")return e;e=e.parentElement}return null}_initScene(e){let o=typeof e.getCamera=="function"?e.getCamera():void 0,r=this._readOptions();o&&(r.camera=o),this._scene=Ie(this,r),this.dispatchEvent(new CustomEvent("glyphcss:scene-ready",{bubbles:!1}))}connectedCallback(){if(this._scene)return;let e=this._findCameraAncestor();if(!e)throw new Error("glyphcss: <glyph-scene> must be placed inside a <glyph-perspective-camera> or <glyph-orthographic-camera>.");if((typeof e.getCamera=="function"?e.getCamera():null)!==null)this._initScene(e);else{let r=()=>{e.removeEventListener("glyph:camera-ready",r),this._scene||this._initScene(e)};e.addEventListener("glyph:camera-ready",r)}}rerender(){this._scene?.rerender()}disconnectedCallback(){this._scene&&(this._scene.destroy(),this._scene=null)}attributeChangedCallback(e,o,r){o!==r&&this._scene&&this._scene.setOptions(this._readOptions())}};import{loadMesh as yt,resolveGeometry as gt,computeSceneBbox as bt}from"@glyphcss/core";var vt=typeof HTMLElement<"u"?HTMLElement:class{},Et=["src","geometry","size","color","position","scale","rotation","normalize"];function Mt(n){let t=bt(n),e=(t.min[0]+t.max[0])/2,o=(t.min[1]+t.max[1])/2,r=(t.min[2]+t.max[2])/2,i=2/(Math.max(t.max[0]-t.min[0],t.max[1]-t.min[1],t.max[2]-t.min[2])||1);return n.map(s=>({...s,vertices:s.vertices.map(c=>[(c[0]-e)*i,(c[1]-o)*i,(c[2]-r)*i])}))}function Ae(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function At(n){if(n){if(!n.includes(",")){let t=parseFloat(n);return Number.isFinite(t)?t:void 0}return Ae(n)}}function Ct(n){return n.closest("glyph-scene")??null}var ne=class extends vt{constructor(){super(...arguments);this._handle=null;this._loadToken=0}static get observedAttributes(){return[...Et]}getMeshHandle(){return this._handle}connectedCallback(){this._maybeLoad()}disconnectedCallback(){this._tearDown()}attributeChangedCallback(e,o,r){if(o!==r){if(e==="src"||e==="geometry"||e==="size"||e==="color"){this._tearDown(),this._maybeLoad();return}this._handle&&this._handle.setTransform(this._readTransform())}}_readTransform(){return{position:Ae(this.getAttribute("position")),scale:At(this.getAttribute("scale")),rotation:Ae(this.getAttribute("rotation"))}}_tearDown(){if(this._loadToken+=1,this._handle){try{this._handle.dispose()}catch{}this._handle=null}}async _maybeLoad(){let e=this.getAttribute("src"),o=this.getAttribute("geometry"),r=Ct(this);if(r){if(!r.getScene()){let a=()=>{r.removeEventListener("glyphcss:scene-ready",a),this._maybeLoad()};r.addEventListener("glyphcss:scene-ready",a);return}if(e){let a=++this._loadToken,i;try{i=await yt(e)}catch(p){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:p,bubbles:!0}));return}if(a!==this._loadToken){try{i.dispose()}catch{}return}let s=r.getScene();if(!s){try{i.dispose()}catch{}return}let l=this.hasAttribute("normalize")?Mt(i.polygons):i.polygons;this._handle=s.add(l,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:l},bubbles:!0}));return}if(o){let a=r.getScene();if(!a)return;let i=this.getAttribute("size"),s=i!==null?parseFloat(i):1,c=this.getAttribute("color")??void 0,l;try{l=gt(o,{size:Number.isFinite(s)?s:1,color:c})}catch(p){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:p,bubbles:!0}));return}this._handle=a.add(l,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:l},bubbles:!0}))}}}};var Gt=typeof HTMLElement<"u"?HTMLElement:class{};function xt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function Lt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==2||t.some(e=>!Number.isFinite(e))))return[t[0],t[1]]}function wt(n){return n.closest("glyph-scene")??null}var re=class extends Gt{constructor(){super(...arguments);this._handle=null}static get observedAttributes(){return["at","size","hotspot-id"]}connectedCallback(){this._register()}disconnectedCallback(){this._handle&&this._unregister()}attributeChangedCallback(e,o,r){o!==r&&(this._handle&&this._unregister(),this._register())}_unregister(){if(!this._handle)return;let e=this._handle.el;for(;e.firstChild;)this.appendChild(e.firstChild);this._handle.remove(),this._handle=null}_register(){let e=xt(this.getAttribute("at"));if(!e)return;let o=wt(this);if(!o)return;if(!o.getScene()){let c=()=>{o.removeEventListener("glyphcss:scene-ready",c),this._register()};o.addEventListener("glyphcss:scene-ready",c);return}let r=o.getScene();if(!r)return;let a=this.getAttribute("hotspot-id")??this.getAttribute("id")??String(Math.random()),i=Lt(this.getAttribute("size"));this._handle=r.addHotspot({id:a,at:e,size:i},()=>this.dispatchEvent(new CustomEvent("glyphcss:hotspot-click",{detail:{id:a},bubbles:!0})));let s=this._handle.el;for(;this.firstChild;)s.appendChild(this.firstChild)}};var _t=typeof HTMLElement<"u"?HTMLElement:class{};function k(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var oe=class extends _t{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","distance","zoom","stretch"]}getCamera(){return this._camera}connectedCallback(){this._camera=ee({rotX:k(this.getAttribute("rot-x")),rotY:k(this.getAttribute("rot-y")),distance:k(this.getAttribute("distance")),zoom:k(this.getAttribute("zoom")),stretch:k(this.getAttribute("stretch"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let a=this._camera;if(!a)return;let i=k(this.getAttribute("rot-x")),s=k(this.getAttribute("rot-y")),c=k(this.getAttribute("distance")),l=k(this.getAttribute("zoom")),p=k(this.getAttribute("stretch")),h=!1;i!==void 0&&a.rotX!==i&&(a.rotX=i,h=!0),s!==void 0&&a.rotY!==s&&(a.rotY=s,h=!0),c!==void 0&&a.distance!==c&&(a.distance=c,h=!0),l!==void 0&&a.zoom!==l&&(a.zoom=l,h=!0),p!==void 0&&a.stretch!==p&&(a.stretch=p,h=!0),h&&this.querySelector("glyph-scene")?.rerender?.()}};var St=typeof HTMLElement<"u"?HTMLElement:class{};function $(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var K=class extends St{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","zoom"]}getCamera(){return this._camera}connectedCallback(){this._camera=Te({rotX:$(this.getAttribute("rot-x")),rotY:$(this.getAttribute("rot-y")),zoom:$(this.getAttribute("zoom"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let a=this._camera;if(!a)return;let i=$(this.getAttribute("rot-x")),s=$(this.getAttribute("rot-y")),c=$(this.getAttribute("zoom")),l=!1;i!==void 0&&a.rotX!==i&&(a.rotX=i,l=!0),s!==void 0&&a.rotY!==s&&(a.rotY=s,l=!0),c!==void 0&&a.zoom!==c&&(a.zoom=c,l=!0),l&&this.querySelector("glyph-scene")?.rerender?.()}};function Ye(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,a=Ne(t.invert),i=t.animate??!1,s=!1,c=!1,l=null,p=null,h=null,f={x:0,y:0},y=n.camera;function g(u){if(!(!o||s)&&h===null&&u.isPrimary!==!1){u.preventDefault(),h=u.pointerId,f={x:u.clientX,y:u.clientY},e.style.cursor="grabbing";try{u.target.setPointerCapture(u.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(c=!0)}}function L(u){if(h===null||u.pointerId!==h||!o||s)return;u.preventDefault();let v=u.clientX-f.x,A=u.clientY-f.y;f={x:u.clientX,y:u.clientY};let G=a,_=1/4*Math.PI/180;y.rotY=y.rotY-v*_*G,y.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,y.rotX-A*_*G)),n.rerender()}function E(u){if(h===u.pointerId){h=null,e.style.cursor=o&&!s?"grab":"";try{u.target.releasePointerCapture(u.pointerId)}catch{}i&&(c=!1)}}function w(u){if(!r||s)return;u.preventDefault();let v=u.deltaY*.001;y.zoom=Math.max(.05,Math.min(10,y.zoom*(1-v))),n.rerender()}function x(u){if(!(s||!i)){if(!c){let v=p!==null?Math.min(u-p,50):16.67,A=typeof i=="object"&&i.speed?i.speed:.3,G=typeof i=="object"&&i.axis?i.axis:"y",m=A*(Math.PI/180)*(v/16.67);G==="y"?y.rotY=y.rotY+m:y.rotX=y.rotX+m,n.rerender()}p=u,l=requestAnimationFrame(x)}}function M(){l===null&&typeof requestAnimationFrame<"u"&&i&&(l=requestAnimationFrame(x))}function C(){l!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l),l=null),p=null}function d(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),e.addEventListener("wheel",w,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.removeEventListener("wheel",w),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return d(),M(),{update(u){let v=!!i;o=u.drag??o,r=u.wheel??r,a=Ne(u.invert),i=u.animate??i,!s&&h===null&&(e.style.cursor=o?"grab":"");let A=!!i;v&&!A?C():!v&&A&&M()},pause(){s||(s=!0,b(),C(),h=null,c=!1)},resume(){s&&(s=!1,d(),M())},destroy(){s||b(),C(),s=!0}}}function Ne(n){return n===void 0||n===!1?1:n===!0?-1:n}var zt=typeof HTMLElement<"u"?HTMLElement:class{};function Tt(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function Ce(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Ht(n){return n.closest("glyph-scene")??null}var ie=class extends zt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert","animate-speed","animate-axis"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Ce(this.getAttribute("drag")),o=Ce(this.getAttribute("wheel")),r=Ce(this.getAttribute("invert")),a=Tt(this.getAttribute("animate-speed")),i=this.getAttribute("animate-axis")==="x"?"x":"y";return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{},...a!==void 0?{animate:{speed:a,axis:i}}:{}}}_attach(){if(this._controls)return;let e=Ht(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Ye(o,this._readOptions())}};function Fe(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,a=Xe(t.invert),i=t.animate??!1,s=!1,c=!1,l=null,p=null,h=null,f={x:0,y:0},y=!1,g=n.camera,L=1/4*Math.PI/180,E=.02;function w(m){if(!(!o||s)&&h===null&&m.isPrimary!==!1){m.preventDefault(),h=m.pointerId,f={x:m.clientX,y:m.clientY},y=m.button===2,e.style.cursor="grabbing";try{m.target.setPointerCapture(m.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(c=!0)}}function x(m){if(h===null||m.pointerId!==h||!o||s)return;m.preventDefault();let _=m.clientX-f.x,S=m.clientY-f.y;f={x:m.clientX,y:m.clientY};let T=a;if(y||m.shiftKey)g.rotY=g.rotY-_*L*T,g.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,g.rotX+S*L*T));else{let z=g.target;g.target=[z[0]-_*E/g.zoom,z[1]-S*E/g.zoom,z[2]]}n.rerender()}function M(m){if(h===m.pointerId){h=null,y=!1,e.style.cursor=o&&!s?"grab":"";try{m.target.releasePointerCapture(m.pointerId)}catch{}i&&(c=!1)}}function C(m){m.preventDefault()}function d(m){if(!r||s)return;m.preventDefault();let _=m.deltaY*.001;g.zoom=Math.max(.05,Math.min(10,g.zoom*(1-_))),n.rerender()}function b(m){if(!(s||!i)){if(!c){let _=p!==null?Math.min(m-p,50):16.67,S=typeof i=="object"&&i.speed?i.speed:.3,T=typeof i=="object"&&i.axis?i.axis:"y",z=S*(Math.PI/180)*(_/16.67);T==="y"?g.rotY=g.rotY+z:g.rotX=g.rotX+z,n.rerender()}p=m,l=requestAnimationFrame(b)}}function u(){l===null&&typeof requestAnimationFrame<"u"&&i&&(l=requestAnimationFrame(b))}function v(){l!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l),l=null),p=null}function A(){e.addEventListener("pointerdown",w),e.addEventListener("pointermove",x),e.addEventListener("pointerup",M),e.addEventListener("pointercancel",M),e.addEventListener("contextmenu",C),e.addEventListener("wheel",d,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function G(){e.removeEventListener("pointerdown",w),e.removeEventListener("pointermove",x),e.removeEventListener("pointerup",M),e.removeEventListener("pointercancel",M),e.removeEventListener("contextmenu",C),e.removeEventListener("wheel",d),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return A(),u(),{update(m){let _=!!i;o=m.drag??o,r=m.wheel??r,a=Xe(m.invert),i=m.animate??i,!s&&h===null&&(e.style.cursor=o?"grab":"");let S=!!i;_&&!S?v():!_&&S&&u()},pause(){s||(s=!0,G(),v(),h=null,c=!1)},resume(){s&&(s=!1,A(),u())},destroy(){s||G(),v(),s=!0}}}function Xe(n){return n===void 0||n===!1?1:n===!0?-1:n}var Pt=typeof HTMLElement<"u"?HTMLElement:class{};function Ge(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Ot(n){return n.closest("glyph-scene")??null}var se=class extends Pt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Ge(this.getAttribute("drag")),o=Ge(this.getAttribute("wheel")),r=Ge(this.getAttribute("invert"));return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{}}}_attach(){if(this._controls)return;let e=Ot(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Fe(o,this._readOptions())}};if(typeof customElements<"u"){if(customElements.get("glyph-scene")||customElements.define("glyph-scene",te),customElements.get("glyph-mesh")||customElements.define("glyph-mesh",ne),customElements.get("glyph-hotspot")||customElements.define("glyph-hotspot",re),customElements.get("glyph-perspective-camera")||customElements.define("glyph-perspective-camera",oe),customElements.get("glyph-orthographic-camera")||customElements.define("glyph-orthographic-camera",K),!customElements.get("glyph-camera")){class n extends K{}customElements.define("glyph-camera",n)}customElements.get("glyph-orbit-controls")||customElements.define("glyph-orbit-controls",ie),customElements.get("glyph-map-controls")||customElements.define("glyph-map-controls",se)}export{re as GlyphHotspotElement,se as GlyphMapControlsElement,ne as GlyphMeshElement,ie as GlyphOrbitControlsElement,K as GlyphOrthographicCameraElement,oe as GlyphPerspectiveCameraElement,te as GlyphSceneElement};
|
|
62
|
+
`;function ke(n,t,e,o,r){return n.map(a=>{let[i,s,c]=t.project(a.at,e,o,r),l=c>-3&&i>=0&&i<e&&s>=0&&s<o;return{id:a.id,col:i,row:s,depth:c,visible:l}})}var ut=1;function dt(n,t){let{position:e,scale:o,rotation:r}=t;if(!e&&!o&&!r)return n;let[a,i,s]=e??[0,0,0],c=1,l=1,p=1;o!==void 0&&(typeof o=="number"?c=l=p=o:[c,l,p]=o);let[h,f,y]=r??[0,0,0],g=Math.cos(h),L=Math.sin(h),E=Math.cos(f),w=Math.sin(f),x=Math.cos(y),M=Math.sin(y);function C(d){let b=d[0]*c,u=d[1]*l,v=d[2]*p,A=x*b-M*u,G=M*b+x*u,m=v;return b=E*A+w*m,u=G,v=-w*A+E*m,A=b,G=g*u-L*v,m=L*u+g*v,[A+a,G+i,m+s]}return n.map(d=>({...d,vertices:d.vertices.map(C)}))}function Ie(n,t={}){Re(n.ownerDocument??void 0);let e={mode:t.mode??"solid",glyphPalette:t.glyphPalette??"default",useColors:t.useColors??!0,cols:t.cols??80,rows:t.rows??24,cellAspect:t.cellAspect??2,directionalLight:t.directionalLight??{direction:[.5,.7,.5],intensity:1},ambientLight:t.ambientLight??{intensity:.4},camera:t.camera??ee(),smoothShading:t.smoothShading??!1,creaseAngle:t.creaseAngle??60,autoSize:t.autoSize??!1},o=n.ownerDocument.createElement("div");o.className="glyph-scene";let r=n.ownerDocument.createElement("pre");r.className="glyph-output";let a=n.ownerDocument.createElement("div");a.className="glyph-hotspot-layer",o.appendChild(r),o.appendChild(a),n.appendChild(o);let i=new Map,s=[],c=!1;function l(){c||(c=!0,Promise.resolve().then(()=>{c=!1,p()}))}function p(){let d=[];for(let v of i.values()){let A=dt(v.polygons,v.transform);for(let G of A)d.push(G)}let b=He({camera:e.camera,grid:{cols:e.cols,rows:e.rows,cellAspect:e.cellAspect},polygons:d,mode:e.mode,directionalLight:e.directionalLight,ambientLight:e.ambientLight,glyphPalette:e.glyphPalette,useColors:e.useColors,smoothShading:e.smoothShading,creaseAngle:e.creaseAngle}),u=Pe(b);e.useColors?r.innerHTML=u:r.textContent=u,h()}function h(){let{cols:d,rows:b,cellAspect:u,camera:v}=e,A=ke(s.map(S=>S.hotspot),v,d,b,u),G=r.getBoundingClientRect(),m=d>0?G.width/d:8,_=b>0?G.height/b:16;for(let S=0;S<s.length;S++){let{el:T}=s[S],z=A[S];z.visible?(T.style.display="",T.style.left=`${(z.col+.5)*m}px`,T.style.top=`${(z.row+.5)*_}px`,T.style.zIndex=String(Math.round(z.depth*1e3))):T.style.display="none"}}function f(d,b={}){let u=ut++;return i.set(u,{id:u,polygons:d,transform:b}),l(),{get id(){return u},get name(){return i.get(u)?.transform.id},get polygons(){return d},setTransform(v){let A=i.get(u);A&&(A.transform=v,l())},dispose(){i.delete(u),l()}}}function y(d,b){let u=n.ownerDocument.createElement("div");u.className="glyph-hotspot",u.setAttribute("data-hotspot-id",d.id);let[v,A]=d.size??[1,1];u.style.position="absolute",u.style.width=`${v}ch`,u.style.height=`${A*e.cellAspect}ch`,b&&u.addEventListener("click",b),a.appendChild(u);let G={hotspot:{id:d.id,at:d.at,size:d.size},el:u,onClick:b};return s.push(G),l(),{get el(){return u},remove(){let m=s.indexOf(G);m>=0&&s.splice(m,1),b&&u.removeEventListener("click",b),a.removeChild(u),l()}}}function g(){p()}function L(d){d.mode!==void 0&&(e.mode=d.mode),d.glyphPalette!==void 0&&(e.glyphPalette=d.glyphPalette),d.useColors!==void 0&&(e.useColors=d.useColors),d.cols!==void 0&&(e.cols=d.cols),d.rows!==void 0&&(e.rows=d.rows),d.cellAspect!==void 0&&(e.cellAspect=d.cellAspect),d.directionalLight!==void 0&&(e.directionalLight=d.directionalLight),d.ambientLight!==void 0&&(e.ambientLight=d.ambientLight),d.camera!==void 0&&(e.camera=d.camera),d.smoothShading!==void 0&&(e.smoothShading=d.smoothShading),d.creaseAngle!==void 0&&(e.creaseAngle=d.creaseAngle),d.autoSize!==void 0&&(e.autoSize=d.autoSize,e.autoSize&&!M&&typeof ResizeObserver<"u"?(M=new ResizeObserver(()=>x()),M.observe(n),x()):!e.autoSize&&M&&(M.disconnect(),M=null)),l()}function E(){return{...e}}function w(){let d=n.ownerDocument.createElement("span");d.textContent="M",d.style.cssText="position:absolute;visibility:hidden;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;padding:0;margin:0",r.appendChild(d);let b=d.getBoundingClientRect();return d.remove(),{w:b.width||8,h:b.height||16}}function x(){let d=n.clientWidth,b=n.clientHeight;if(!d||!b)return;let u=w(),v=Math.max(20,Math.floor(d/u.w)),A=Math.max(8,Math.floor(b/u.h)),G=u.h/u.w,m=!1;e.cols!==v&&(e.cols=v,m=!0),e.rows!==A&&(e.rows=A,m=!0),Math.abs(e.cellAspect-G)>.01&&(e.cellAspect=G,m=!0),m&&l()}let M=null;e.autoSize&&typeof ResizeObserver<"u"&&(M=new ResizeObserver(()=>x()),M.observe(n),x());function C(){M&&(M.disconnect(),M=null),i.clear(),n.contains(o)&&n.removeChild(o)}return l(),{get host(){return n},get output(){return r},get camera(){return e.camera},add:f,addHotspot:y,rerender:g,setOptions:L,getOptions:E,fit:x,destroy:C}}var ht=typeof HTMLElement<"u"?HTMLElement:class{},pt=["mode","glyph-palette","use-colors","cols","rows","cell-aspect","directional-direction","directional-intensity","ambient-intensity","auto-size"];function Z(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function mt(n){if(n==="wireframe"||n==="solid"||n==="voxel")return n}function ft(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}var te=class extends ht{constructor(){super(...arguments);this._scene=null}static get observedAttributes(){return[...pt]}getScene(){return this._scene}_readOptions(){let e={},o=mt(this.getAttribute("mode"));o!==void 0&&(e.mode=o);let r=this.getAttribute("glyph-palette");r&&(e.glyphPalette=r);let a=ft(this.getAttribute("use-colors"));a!==void 0&&(e.useColors=a);let i=Z(this.getAttribute("cols"));i!==void 0&&(e.cols=i);let s=Z(this.getAttribute("rows"));s!==void 0&&(e.rows=s);let c=Z(this.getAttribute("cell-aspect"));c!==void 0&&(e.cellAspect=c);let l=Z(this.getAttribute("directional-intensity"));l!==void 0&&(e.directionalLight={direction:[.5,.7,.5],intensity:l});let p=Z(this.getAttribute("ambient-intensity"));return p!==void 0&&(e.ambientLight={intensity:p}),this.hasAttribute("auto-size")&&(e.autoSize=!0),e}_findCameraAncestor(){let e=this.parentElement;for(;e;){let o=e.tagName.toLowerCase();if(o==="glyph-perspective-camera"||o==="glyph-orthographic-camera"||o==="glyph-camera")return e;e=e.parentElement}return null}_initScene(e){let o=typeof e.getCamera=="function"?e.getCamera():void 0,r=this._readOptions();o&&(r.camera=o),this._scene=Ie(this,r),this.dispatchEvent(new CustomEvent("glyphcss:scene-ready",{bubbles:!1}))}connectedCallback(){if(this._scene)return;let e=this._findCameraAncestor();if(!e)throw new Error("glyphcss: <glyph-scene> must be placed inside a <glyph-camera>, <glyph-perspective-camera>, or <glyph-orthographic-camera>.");if((typeof e.getCamera=="function"?e.getCamera():null)!==null)this._initScene(e);else{let r=()=>{e.removeEventListener("glyph:camera-ready",r),this._scene||this._initScene(e)};e.addEventListener("glyph:camera-ready",r)}}rerender(){this._scene?.rerender()}disconnectedCallback(){this._scene&&(this._scene.destroy(),this._scene=null)}attributeChangedCallback(e,o,r){o!==r&&this._scene&&this._scene.setOptions(this._readOptions())}};import{loadMesh as yt,resolveGeometry as gt,computeSceneBbox as bt}from"@glyphcss/core";var vt=typeof HTMLElement<"u"?HTMLElement:class{},Et=["src","geometry","size","color","position","scale","rotation","normalize"];function Mt(n){let t=bt(n),e=(t.min[0]+t.max[0])/2,o=(t.min[1]+t.max[1])/2,r=(t.min[2]+t.max[2])/2,i=2/(Math.max(t.max[0]-t.min[0],t.max[1]-t.min[1],t.max[2]-t.min[2])||1);return n.map(s=>({...s,vertices:s.vertices.map(c=>[(c[0]-e)*i,(c[1]-o)*i,(c[2]-r)*i])}))}function Ae(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function At(n){if(n){if(!n.includes(",")){let t=parseFloat(n);return Number.isFinite(t)?t:void 0}return Ae(n)}}function Ct(n){return n.closest("glyph-scene")??null}var ne=class extends vt{constructor(){super(...arguments);this._handle=null;this._loadToken=0}static get observedAttributes(){return[...Et]}getMeshHandle(){return this._handle}connectedCallback(){this._maybeLoad()}disconnectedCallback(){this._tearDown()}attributeChangedCallback(e,o,r){if(o!==r){if(e==="src"||e==="geometry"||e==="size"||e==="color"){this._tearDown(),this._maybeLoad();return}this._handle&&this._handle.setTransform(this._readTransform())}}_readTransform(){return{position:Ae(this.getAttribute("position")),scale:At(this.getAttribute("scale")),rotation:Ae(this.getAttribute("rotation"))}}_tearDown(){if(this._loadToken+=1,this._handle){try{this._handle.dispose()}catch{}this._handle=null}}async _maybeLoad(){let e=this.getAttribute("src"),o=this.getAttribute("geometry"),r=Ct(this);if(r){if(!r.getScene()){let a=()=>{r.removeEventListener("glyphcss:scene-ready",a),this._maybeLoad()};r.addEventListener("glyphcss:scene-ready",a);return}if(e){let a=++this._loadToken,i;try{i=await yt(e)}catch(p){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:p,bubbles:!0}));return}if(a!==this._loadToken){try{i.dispose()}catch{}return}let s=r.getScene();if(!s){try{i.dispose()}catch{}return}let l=this.hasAttribute("normalize")?Mt(i.polygons):i.polygons;this._handle=s.add(l,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:l},bubbles:!0}));return}if(o){let a=r.getScene();if(!a)return;let i=this.getAttribute("size"),s=i!==null?parseFloat(i):1,c=this.getAttribute("color")??void 0,l;try{l=gt(o,{size:Number.isFinite(s)?s:1,color:c})}catch(p){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:p,bubbles:!0}));return}this._handle=a.add(l,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:l},bubbles:!0}))}}}};var Gt=typeof HTMLElement<"u"?HTMLElement:class{};function xt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function Lt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==2||t.some(e=>!Number.isFinite(e))))return[t[0],t[1]]}function wt(n){return n.closest("glyph-scene")??null}var re=class extends Gt{constructor(){super(...arguments);this._handle=null}static get observedAttributes(){return["at","size","hotspot-id"]}connectedCallback(){this._register()}disconnectedCallback(){this._handle&&this._unregister()}attributeChangedCallback(e,o,r){o!==r&&(this._handle&&this._unregister(),this._register())}_unregister(){if(!this._handle)return;let e=this._handle.el;for(;e.firstChild;)this.appendChild(e.firstChild);this._handle.remove(),this._handle=null}_register(){let e=xt(this.getAttribute("at"));if(!e)return;let o=wt(this);if(!o)return;if(!o.getScene()){let c=()=>{o.removeEventListener("glyphcss:scene-ready",c),this._register()};o.addEventListener("glyphcss:scene-ready",c);return}let r=o.getScene();if(!r)return;let a=this.getAttribute("hotspot-id")??this.getAttribute("id")??String(Math.random()),i=Lt(this.getAttribute("size"));this._handle=r.addHotspot({id:a,at:e,size:i},()=>this.dispatchEvent(new CustomEvent("glyphcss:hotspot-click",{detail:{id:a},bubbles:!0})));let s=this._handle.el;for(;this.firstChild;)s.appendChild(this.firstChild)}};var _t=typeof HTMLElement<"u"?HTMLElement:class{};function k(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var oe=class extends _t{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","distance","zoom","stretch"]}getCamera(){return this._camera}connectedCallback(){this._camera=ee({rotX:k(this.getAttribute("rot-x")),rotY:k(this.getAttribute("rot-y")),distance:k(this.getAttribute("distance")),zoom:k(this.getAttribute("zoom")),stretch:k(this.getAttribute("stretch"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let a=this._camera;if(!a)return;let i=k(this.getAttribute("rot-x")),s=k(this.getAttribute("rot-y")),c=k(this.getAttribute("distance")),l=k(this.getAttribute("zoom")),p=k(this.getAttribute("stretch")),h=!1;i!==void 0&&a.rotX!==i&&(a.rotX=i,h=!0),s!==void 0&&a.rotY!==s&&(a.rotY=s,h=!0),c!==void 0&&a.distance!==c&&(a.distance=c,h=!0),l!==void 0&&a.zoom!==l&&(a.zoom=l,h=!0),p!==void 0&&a.stretch!==p&&(a.stretch=p,h=!0),h&&this.querySelector("glyph-scene")?.rerender?.()}};var St=typeof HTMLElement<"u"?HTMLElement:class{};function $(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var K=class extends St{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","zoom"]}getCamera(){return this._camera}connectedCallback(){this._camera=Te({rotX:$(this.getAttribute("rot-x")),rotY:$(this.getAttribute("rot-y")),zoom:$(this.getAttribute("zoom"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let a=this._camera;if(!a)return;let i=$(this.getAttribute("rot-x")),s=$(this.getAttribute("rot-y")),c=$(this.getAttribute("zoom")),l=!1;i!==void 0&&a.rotX!==i&&(a.rotX=i,l=!0),s!==void 0&&a.rotY!==s&&(a.rotY=s,l=!0),c!==void 0&&a.zoom!==c&&(a.zoom=c,l=!0),l&&this.querySelector("glyph-scene")?.rerender?.()}};function Ye(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,a=Ne(t.invert),i=t.animate??!1,s=!1,c=!1,l=null,p=null,h=null,f={x:0,y:0},y=n.camera;function g(u){if(!(!o||s)&&h===null&&u.isPrimary!==!1){u.preventDefault(),h=u.pointerId,f={x:u.clientX,y:u.clientY},e.style.cursor="grabbing";try{u.target.setPointerCapture(u.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(c=!0)}}function L(u){if(h===null||u.pointerId!==h||!o||s)return;u.preventDefault();let v=u.clientX-f.x,A=u.clientY-f.y;f={x:u.clientX,y:u.clientY};let G=a,_=1/4*Math.PI/180;y.rotY=y.rotY-v*_*G,y.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,y.rotX-A*_*G)),n.rerender()}function E(u){if(h===u.pointerId){h=null,e.style.cursor=o&&!s?"grab":"";try{u.target.releasePointerCapture(u.pointerId)}catch{}i&&(c=!1)}}function w(u){if(!r||s)return;u.preventDefault();let v=u.deltaY*.001;y.zoom=Math.max(.05,Math.min(10,y.zoom*(1-v))),n.rerender()}function x(u){if(!(s||!i)){if(!c){let v=p!==null?Math.min(u-p,50):16.67,A=typeof i=="object"&&i.speed?i.speed:.3,G=typeof i=="object"&&i.axis?i.axis:"y",m=A*(Math.PI/180)*(v/16.67);G==="y"?y.rotY=y.rotY+m:y.rotX=y.rotX+m,n.rerender()}p=u,l=requestAnimationFrame(x)}}function M(){l===null&&typeof requestAnimationFrame<"u"&&i&&(l=requestAnimationFrame(x))}function C(){l!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l),l=null),p=null}function d(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),e.addEventListener("wheel",w,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.removeEventListener("wheel",w),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return d(),M(),{update(u){let v=!!i;o=u.drag??o,r=u.wheel??r,a=Ne(u.invert),i=u.animate??i,!s&&h===null&&(e.style.cursor=o?"grab":"");let A=!!i;v&&!A?C():!v&&A&&M()},pause(){s||(s=!0,b(),C(),h=null,c=!1)},resume(){s&&(s=!1,d(),M())},destroy(){s||b(),C(),s=!0}}}function Ne(n){return n===void 0||n===!1?1:n===!0?-1:n}var zt=typeof HTMLElement<"u"?HTMLElement:class{};function Tt(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function Ce(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Ht(n){return n.closest("glyph-scene")??null}var ie=class extends zt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert","animate-speed","animate-axis"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Ce(this.getAttribute("drag")),o=Ce(this.getAttribute("wheel")),r=Ce(this.getAttribute("invert")),a=Tt(this.getAttribute("animate-speed")),i=this.getAttribute("animate-axis")==="x"?"x":"y";return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{},...a!==void 0?{animate:{speed:a,axis:i}}:{}}}_attach(){if(this._controls)return;let e=Ht(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Ye(o,this._readOptions())}};function Fe(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,a=Xe(t.invert),i=t.animate??!1,s=!1,c=!1,l=null,p=null,h=null,f={x:0,y:0},y=!1,g=n.camera,L=1/4*Math.PI/180,E=.02;function w(m){if(!(!o||s)&&h===null&&m.isPrimary!==!1){m.preventDefault(),h=m.pointerId,f={x:m.clientX,y:m.clientY},y=m.button===2,e.style.cursor="grabbing";try{m.target.setPointerCapture(m.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(c=!0)}}function x(m){if(h===null||m.pointerId!==h||!o||s)return;m.preventDefault();let _=m.clientX-f.x,S=m.clientY-f.y;f={x:m.clientX,y:m.clientY};let T=a;if(y||m.shiftKey)g.rotY=g.rotY-_*L*T,g.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,g.rotX+S*L*T));else{let z=g.target;g.target=[z[0]-_*E/g.zoom,z[1]-S*E/g.zoom,z[2]]}n.rerender()}function M(m){if(h===m.pointerId){h=null,y=!1,e.style.cursor=o&&!s?"grab":"";try{m.target.releasePointerCapture(m.pointerId)}catch{}i&&(c=!1)}}function C(m){m.preventDefault()}function d(m){if(!r||s)return;m.preventDefault();let _=m.deltaY*.001;g.zoom=Math.max(.05,Math.min(10,g.zoom*(1-_))),n.rerender()}function b(m){if(!(s||!i)){if(!c){let _=p!==null?Math.min(m-p,50):16.67,S=typeof i=="object"&&i.speed?i.speed:.3,T=typeof i=="object"&&i.axis?i.axis:"y",z=S*(Math.PI/180)*(_/16.67);T==="y"?g.rotY=g.rotY+z:g.rotX=g.rotX+z,n.rerender()}p=m,l=requestAnimationFrame(b)}}function u(){l===null&&typeof requestAnimationFrame<"u"&&i&&(l=requestAnimationFrame(b))}function v(){l!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(l),l=null),p=null}function A(){e.addEventListener("pointerdown",w),e.addEventListener("pointermove",x),e.addEventListener("pointerup",M),e.addEventListener("pointercancel",M),e.addEventListener("contextmenu",C),e.addEventListener("wheel",d,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function G(){e.removeEventListener("pointerdown",w),e.removeEventListener("pointermove",x),e.removeEventListener("pointerup",M),e.removeEventListener("pointercancel",M),e.removeEventListener("contextmenu",C),e.removeEventListener("wheel",d),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return A(),u(),{update(m){let _=!!i;o=m.drag??o,r=m.wheel??r,a=Xe(m.invert),i=m.animate??i,!s&&h===null&&(e.style.cursor=o?"grab":"");let S=!!i;_&&!S?v():!_&&S&&u()},pause(){s||(s=!0,G(),v(),h=null,c=!1)},resume(){s&&(s=!1,A(),u())},destroy(){s||G(),v(),s=!0}}}function Xe(n){return n===void 0||n===!1?1:n===!0?-1:n}var Pt=typeof HTMLElement<"u"?HTMLElement:class{};function Ge(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Ot(n){return n.closest("glyph-scene")??null}var se=class extends Pt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Ge(this.getAttribute("drag")),o=Ge(this.getAttribute("wheel")),r=Ge(this.getAttribute("invert"));return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{}}}_attach(){if(this._controls)return;let e=Ot(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Fe(o,this._readOptions())}};if(typeof customElements<"u"){if(customElements.get("glyph-scene")||customElements.define("glyph-scene",te),customElements.get("glyph-mesh")||customElements.define("glyph-mesh",ne),customElements.get("glyph-hotspot")||customElements.define("glyph-hotspot",re),customElements.get("glyph-perspective-camera")||customElements.define("glyph-perspective-camera",oe),customElements.get("glyph-orthographic-camera")||customElements.define("glyph-orthographic-camera",K),!customElements.get("glyph-camera")){class n extends K{}customElements.define("glyph-camera",n)}customElements.get("glyph-orbit-controls")||customElements.define("glyph-orbit-controls",ie),customElements.get("glyph-map-controls")||customElements.define("glyph-map-controls",se)}export{re as GlyphHotspotElement,se as GlyphMapControlsElement,ne as GlyphMeshElement,ie as GlyphOrbitControlsElement,K as GlyphOrthographicCameraElement,oe as GlyphPerspectiveCameraElement,te as GlyphSceneElement};
|
package/dist/index.cjs
CHANGED
|
@@ -59,4 +59,4 @@
|
|
|
59
59
|
the content from the 3D vertex being labelled. */
|
|
60
60
|
transform: translate(-50%, -50%);
|
|
61
61
|
}
|
|
62
|
-
`;function ce(n,t,e,o,r){return n.map(s=>{let[i,a,u]=t.project(s.at,e,o,r),c=u>-3&&i>=0&&i<e&&a>=0&&a<o;return{id:s.id,col:i,row:a,depth:u,visible:c}})}var Ht=1;function Tt(n,t){let{position:e,scale:o,rotation:r}=t;if(!e&&!o&&!r)return n;let[s,i,a]=e??[0,0,0],u=1,c=1,h=1;o!==void 0&&(typeof o=="number"?u=c=h=o:[u,c,h]=o);let[d,f,m]=r??[0,0,0],g=Math.cos(d),L=Math.sin(d),E=Math.cos(f),S=Math.sin(f),A=Math.cos(m),M=Math.sin(m);function x(p){let b=p[0]*u,l=p[1]*c,v=p[2]*h,G=A*b-M*l,C=M*b+A*l,y=v;return b=E*G+S*y,l=C,v=-S*G+E*y,G=b,C=g*l-L*v,y=L*l+g*v,[G+s,C+i,y+a]}return n.map(p=>({...p,vertices:p.vertices.map(x)}))}function ue(n,t={}){ae(n.ownerDocument??void 0);let e={mode:t.mode??"solid",glyphPalette:t.glyphPalette??"default",useColors:t.useColors??!0,cols:t.cols??80,rows:t.rows??24,cellAspect:t.cellAspect??2,directionalLight:t.directionalLight??{direction:[.5,.7,.5],intensity:1},ambientLight:t.ambientLight??{intensity:.4},camera:t.camera??j(),smoothShading:t.smoothShading??!1,creaseAngle:t.creaseAngle??60,autoSize:t.autoSize??!1},o=n.ownerDocument.createElement("div");o.className="glyph-scene";let r=n.ownerDocument.createElement("pre");r.className="glyph-output";let s=n.ownerDocument.createElement("div");s.className="glyph-hotspot-layer",o.appendChild(r),o.appendChild(s),n.appendChild(o);let i=new Map,a=[],u=!1;function c(){u||(u=!0,Promise.resolve().then(()=>{u=!1,h()}))}function h(){let p=[];for(let v of i.values()){let G=Tt(v.polygons,v.transform);for(let C of G)p.push(C)}let b=le({camera:e.camera,grid:{cols:e.cols,rows:e.rows,cellAspect:e.cellAspect},polygons:p,mode:e.mode,directionalLight:e.directionalLight,ambientLight:e.ambientLight,glyphPalette:e.glyphPalette,useColors:e.useColors,smoothShading:e.smoothShading,creaseAngle:e.creaseAngle}),l=re(b);e.useColors?r.innerHTML=l:r.textContent=l,d()}function d(){let{cols:p,rows:b,cellAspect:l,camera:v}=e,G=ce(a.map(_=>_.hotspot),v,p,b,l),C=r.getBoundingClientRect(),y=p>0?C.width/p:8,w=b>0?C.height/b:16;for(let _=0;_<a.length;_++){let{el:P}=a[_],z=G[_];z.visible?(P.style.display="",P.style.left=`${(z.col+.5)*y}px`,P.style.top=`${(z.row+.5)*w}px`,P.style.zIndex=String(Math.round(z.depth*1e3))):P.style.display="none"}}function f(p,b={}){let l=Ht++;return i.set(l,{id:l,polygons:p,transform:b}),c(),{get id(){return l},get name(){return i.get(l)?.transform.id},get polygons(){return p},setTransform(v){let G=i.get(l);G&&(G.transform=v,c())},dispose(){i.delete(l),c()}}}function m(p,b){let l=n.ownerDocument.createElement("div");l.className="glyph-hotspot",l.setAttribute("data-hotspot-id",p.id);let[v,G]=p.size??[1,1];l.style.position="absolute",l.style.width=`${v}ch`,l.style.height=`${G*e.cellAspect}ch`,b&&l.addEventListener("click",b),s.appendChild(l);let C={hotspot:{id:p.id,at:p.at,size:p.size},el:l,onClick:b};return a.push(C),c(),{get el(){return l},remove(){let y=a.indexOf(C);y>=0&&a.splice(y,1),b&&l.removeEventListener("click",b),s.removeChild(l),c()}}}function g(){h()}function L(p){p.mode!==void 0&&(e.mode=p.mode),p.glyphPalette!==void 0&&(e.glyphPalette=p.glyphPalette),p.useColors!==void 0&&(e.useColors=p.useColors),p.cols!==void 0&&(e.cols=p.cols),p.rows!==void 0&&(e.rows=p.rows),p.cellAspect!==void 0&&(e.cellAspect=p.cellAspect),p.directionalLight!==void 0&&(e.directionalLight=p.directionalLight),p.ambientLight!==void 0&&(e.ambientLight=p.ambientLight),p.camera!==void 0&&(e.camera=p.camera),p.smoothShading!==void 0&&(e.smoothShading=p.smoothShading),p.creaseAngle!==void 0&&(e.creaseAngle=p.creaseAngle),p.autoSize!==void 0&&(e.autoSize=p.autoSize,e.autoSize&&!M&&typeof ResizeObserver<"u"?(M=new ResizeObserver(()=>A()),M.observe(n),A()):!e.autoSize&&M&&(M.disconnect(),M=null)),c()}function E(){return{...e}}function S(){let p=n.ownerDocument.createElement("span");p.textContent="M",p.style.cssText="position:absolute;visibility:hidden;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;padding:0;margin:0",r.appendChild(p);let b=p.getBoundingClientRect();return p.remove(),{w:b.width||8,h:b.height||16}}function A(){let p=n.clientWidth,b=n.clientHeight;if(!p||!b)return;let l=S(),v=Math.max(20,Math.floor(p/l.w)),G=Math.max(8,Math.floor(b/l.h)),C=l.h/l.w,y=!1;e.cols!==v&&(e.cols=v,y=!0),e.rows!==G&&(e.rows=G,y=!0),Math.abs(e.cellAspect-C)>.01&&(e.cellAspect=C,y=!0),y&&c()}let M=null;e.autoSize&&typeof ResizeObserver<"u"&&(M=new ResizeObserver(()=>A()),M.observe(n),A());function x(){M&&(M.disconnect(),M=null),i.clear(),n.contains(o)&&n.removeChild(o)}return c(),{get host(){return n},get output(){return r},get camera(){return e.camera},add:f,addHotspot:m,rerender:g,setOptions:L,getOptions:E,fit:A,destroy:x}}function de(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,s=Ze(t.invert),i=t.animate??!1,a=!1,u=!1,c=null,h=null,d=null,f={x:0,y:0},m=n.camera;function g(l){if(!(!o||a)&&d===null&&l.isPrimary!==!1){l.preventDefault(),d=l.pointerId,f={x:l.clientX,y:l.clientY},e.style.cursor="grabbing";try{l.target.setPointerCapture(l.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(u=!0)}}function L(l){if(d===null||l.pointerId!==d||!o||a)return;l.preventDefault();let v=l.clientX-f.x,G=l.clientY-f.y;f={x:l.clientX,y:l.clientY};let C=s,w=1/4*Math.PI/180;m.rotY=m.rotY-v*w*C,m.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,m.rotX-G*w*C)),n.rerender()}function E(l){if(d===l.pointerId){d=null,e.style.cursor=o&&!a?"grab":"";try{l.target.releasePointerCapture(l.pointerId)}catch{}i&&(u=!1)}}function S(l){if(!r||a)return;l.preventDefault();let v=l.deltaY*.001;m.zoom=Math.max(.05,Math.min(10,m.zoom*(1-v))),n.rerender()}function A(l){if(!(a||!i)){if(!u){let v=h!==null?Math.min(l-h,50):16.67,G=typeof i=="object"&&i.speed?i.speed:.3,C=typeof i=="object"&&i.axis?i.axis:"y",y=G*(Math.PI/180)*(v/16.67);C==="y"?m.rotY=m.rotY+y:m.rotX=m.rotX+y,n.rerender()}h=l,c=requestAnimationFrame(A)}}function M(){c===null&&typeof requestAnimationFrame<"u"&&i&&(c=requestAnimationFrame(A))}function x(){c!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(c),c=null),h=null}function p(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),e.addEventListener("wheel",S,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.removeEventListener("wheel",S),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return p(),M(),{update(l){let v=!!i;o=l.drag??o,r=l.wheel??r,s=Ze(l.invert),i=l.animate??i,!a&&d===null&&(e.style.cursor=o?"grab":"");let G=!!i;v&&!G?x():!v&&G&&M()},pause(){a||(a=!0,b(),x(),d=null,u=!1)},resume(){a&&(a=!1,p(),M())},destroy(){a||b(),x(),a=!0}}}function Ze(n){return n===void 0||n===!1?1:n===!0?-1:n}function pe(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,s=Je(t.invert),i=t.animate??!1,a=!1,u=!1,c=null,h=null,d=null,f={x:0,y:0},m=!1,g=n.camera,L=1/4*Math.PI/180,E=.02;function S(y){if(!(!o||a)&&d===null&&y.isPrimary!==!1){y.preventDefault(),d=y.pointerId,f={x:y.clientX,y:y.clientY},m=y.button===2,e.style.cursor="grabbing";try{y.target.setPointerCapture(y.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(u=!0)}}function A(y){if(d===null||y.pointerId!==d||!o||a)return;y.preventDefault();let w=y.clientX-f.x,_=y.clientY-f.y;f={x:y.clientX,y:y.clientY};let P=s;if(m||y.shiftKey)g.rotY=g.rotY-w*L*P,g.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,g.rotX+_*L*P));else{let z=g.target;g.target=[z[0]-w*E/g.zoom,z[1]-_*E/g.zoom,z[2]]}n.rerender()}function M(y){if(d===y.pointerId){d=null,m=!1,e.style.cursor=o&&!a?"grab":"";try{y.target.releasePointerCapture(y.pointerId)}catch{}i&&(u=!1)}}function x(y){y.preventDefault()}function p(y){if(!r||a)return;y.preventDefault();let w=y.deltaY*.001;g.zoom=Math.max(.05,Math.min(10,g.zoom*(1-w))),n.rerender()}function b(y){if(!(a||!i)){if(!u){let w=h!==null?Math.min(y-h,50):16.67,_=typeof i=="object"&&i.speed?i.speed:.3,P=typeof i=="object"&&i.axis?i.axis:"y",z=_*(Math.PI/180)*(w/16.67);P==="y"?g.rotY=g.rotY+z:g.rotX=g.rotX+z,n.rerender()}h=y,c=requestAnimationFrame(b)}}function l(){c===null&&typeof requestAnimationFrame<"u"&&i&&(c=requestAnimationFrame(b))}function v(){c!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(c),c=null),h=null}function G(){e.addEventListener("pointerdown",S),e.addEventListener("pointermove",A),e.addEventListener("pointerup",M),e.addEventListener("pointercancel",M),e.addEventListener("contextmenu",x),e.addEventListener("wheel",p,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function C(){e.removeEventListener("pointerdown",S),e.removeEventListener("pointermove",A),e.removeEventListener("pointerup",M),e.removeEventListener("pointercancel",M),e.removeEventListener("contextmenu",x),e.removeEventListener("wheel",p),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return G(),l(),{update(y){let w=!!i;o=y.drag??o,r=y.wheel??r,s=Je(y.invert),i=y.animate??i,!a&&d===null&&(e.style.cursor=o?"grab":"");let _=!!i;w&&!_?v():!w&&_&&l()},pause(){a||(a=!0,C(),v(),d=null,u=!1)},resume(){a&&(a=!1,G(),l())},destroy(){a||C(),v(),a=!0}}}function Je(n){return n===void 0||n===!1?1:n===!0?-1:n}function et(n,t={}){if(n.camera.kind!=="perspective")throw new Error("glyphcss: GlyphFirstPersonControls requires a perspective camera. Use <GlyphPerspectiveCamera> (not <GlyphOrthographicCamera> / <GlyphCamera>).");n.camera.eyeMode=!0;let e=n.host,o=t.drag??!0,r=t.keyboard??!0,s=t.moveSpeed??.05,i=t.lookSpeed??.004,a=Qe(t.invert),u=!1,c=null,h={x:0,y:0},d=new Set,f=null,m=n.camera;function g(l){if(!(!o||u)&&c===null){l.preventDefault(),c=l.pointerId,h={x:l.clientX,y:l.clientY};try{l.target.setPointerCapture(l.pointerId)}catch{}}}function L(l){if(c===null||l.pointerId!==c||!o||u)return;l.preventDefault();let v=l.clientX-h.x,G=l.clientY-h.y;h={x:l.clientX,y:l.clientY},m.rotY=m.rotY-v*i*a,m.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,m.rotX+G*i*a)),n.rerender()}function E(l){if(c===l.pointerId){c=null;try{l.target.releasePointerCapture(l.pointerId)}catch{}}}function S(l){r&&!u&&d.add(l.key.toLowerCase())}function A(l){d.delete(l.key.toLowerCase())}function M(){if(u||!r||d.size===0)return;let l=m.target,v=Math.cos(m.rotY),G=Math.sin(m.rotY),C=!1;(d.has("w")||d.has("arrowup"))&&(m.target=[l[0]-G*s,l[1]-v*s,l[2]],C=!0),(d.has("s")||d.has("arrowdown"))&&(m.target=[l[0]+G*s,l[1]+v*s,l[2]],C=!0),(d.has("a")||d.has("arrowleft"))&&(m.target=[l[0]-v*s,l[1]+G*s,l[2]],C=!0),(d.has("d")||d.has("arrowright"))&&(m.target=[l[0]+v*s,l[1]-G*s,l[2]],C=!0),C&&n.rerender()}function x(){u||(M(),f=requestAnimationFrame(x))}function p(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),r&&(e.ownerDocument?.addEventListener("keydown",S),e.ownerDocument?.addEventListener("keyup",A)),e.style.touchAction="none",e.style.userSelect="none",typeof requestAnimationFrame<"u"&&(f=requestAnimationFrame(x))}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.ownerDocument?.removeEventListener("keydown",S),e.ownerDocument?.removeEventListener("keyup",A),e.style.touchAction="",e.style.userSelect="",f!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(f),f=null),d.clear(),n.camera.eyeMode=!1}return p(),{update(l){o=l.drag??o,r=l.keyboard??r,s=l.moveSpeed??s,i=l.lookSpeed??i,a=Qe(l.invert)},pause(){u||(u=!0,b(),c=null)},resume(){u&&(u=!1,p())},destroy(){u||b(),u=!0}}}function Qe(n){return n===void 0||n===!1?1:n===!0?-1:n}function tt(n,t){let e=n.querySelector(`[data-glyph-mesh-id="${CSS.escape(t)}"]`);return e instanceof HTMLElement?e:null}function ke(n,t,e){let o=n.getBoundingClientRect();return o.width<=0||o.height<=0?!1:t>=o.left&&t<=o.right&&e>=o.top&&e<=o.bottom}function nt(n,t,e){let o=(n instanceof Document,n),r=Array.from(o.querySelectorAll(".glyph-mesh"));for(let s of r)if(ke(s,t,e))return s;return null}var zt=typeof HTMLElement<"u"?HTMLElement:class{},Pt=["mode","glyph-palette","use-colors","cols","rows","cell-aspect","directional-direction","directional-intensity","ambient-intensity","auto-size"];function oe(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function Ot(n){if(n==="wireframe"||n==="solid"||n==="voxel")return n}function kt(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}var he=class extends zt{constructor(){super(...arguments);this._scene=null}static get observedAttributes(){return[...Pt]}getScene(){return this._scene}_readOptions(){let e={},o=Ot(this.getAttribute("mode"));o!==void 0&&(e.mode=o);let r=this.getAttribute("glyph-palette");r&&(e.glyphPalette=r);let s=kt(this.getAttribute("use-colors"));s!==void 0&&(e.useColors=s);let i=oe(this.getAttribute("cols"));i!==void 0&&(e.cols=i);let a=oe(this.getAttribute("rows"));a!==void 0&&(e.rows=a);let u=oe(this.getAttribute("cell-aspect"));u!==void 0&&(e.cellAspect=u);let c=oe(this.getAttribute("directional-intensity"));c!==void 0&&(e.directionalLight={direction:[.5,.7,.5],intensity:c});let h=oe(this.getAttribute("ambient-intensity"));return h!==void 0&&(e.ambientLight={intensity:h}),this.hasAttribute("auto-size")&&(e.autoSize=!0),e}_findCameraAncestor(){let e=this.parentElement;for(;e;){let o=e.tagName.toLowerCase();if(o==="glyph-perspective-camera"||o==="glyph-orthographic-camera")return e;e=e.parentElement}return null}_initScene(e){let o=typeof e.getCamera=="function"?e.getCamera():void 0,r=this._readOptions();o&&(r.camera=o),this._scene=ue(this,r),this.dispatchEvent(new CustomEvent("glyphcss:scene-ready",{bubbles:!1}))}connectedCallback(){if(this._scene)return;let e=this._findCameraAncestor();if(!e)throw new Error("glyphcss: <glyph-scene> must be placed inside a <glyph-perspective-camera> or <glyph-orthographic-camera>.");if((typeof e.getCamera=="function"?e.getCamera():null)!==null)this._initScene(e);else{let r=()=>{e.removeEventListener("glyph:camera-ready",r),this._scene||this._initScene(e)};e.addEventListener("glyph:camera-ready",r)}}rerender(){this._scene?.rerender()}disconnectedCallback(){this._scene&&(this._scene.destroy(),this._scene=null)}attributeChangedCallback(e,o,r){o!==r&&this._scene&&this._scene.setOptions(this._readOptions())}};var U=require("@glyphcss/core"),Rt=typeof HTMLElement<"u"?HTMLElement:class{},It=["src","geometry","size","color","position","scale","rotation","normalize"];function Ft(n){let t=(0,U.computeSceneBbox)(n),e=(t.min[0]+t.max[0])/2,o=(t.min[1]+t.max[1])/2,r=(t.min[2]+t.max[2])/2,i=2/(Math.max(t.max[0]-t.min[0],t.max[1]-t.min[1],t.max[2]-t.min[2])||1);return n.map(a=>({...a,vertices:a.vertices.map(u=>[(u[0]-e)*i,(u[1]-o)*i,(u[2]-r)*i])}))}function Re(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function Yt(n){if(n){if(!n.includes(",")){let t=parseFloat(n);return Number.isFinite(t)?t:void 0}return Re(n)}}function Dt(n){return n.closest("glyph-scene")??null}var me=class extends Rt{constructor(){super(...arguments);this._handle=null;this._loadToken=0}static get observedAttributes(){return[...It]}getMeshHandle(){return this._handle}connectedCallback(){this._maybeLoad()}disconnectedCallback(){this._tearDown()}attributeChangedCallback(e,o,r){if(o!==r){if(e==="src"||e==="geometry"||e==="size"||e==="color"){this._tearDown(),this._maybeLoad();return}this._handle&&this._handle.setTransform(this._readTransform())}}_readTransform(){return{position:Re(this.getAttribute("position")),scale:Yt(this.getAttribute("scale")),rotation:Re(this.getAttribute("rotation"))}}_tearDown(){if(this._loadToken+=1,this._handle){try{this._handle.dispose()}catch{}this._handle=null}}async _maybeLoad(){let e=this.getAttribute("src"),o=this.getAttribute("geometry"),r=Dt(this);if(r){if(!r.getScene()){let s=()=>{r.removeEventListener("glyphcss:scene-ready",s),this._maybeLoad()};r.addEventListener("glyphcss:scene-ready",s);return}if(e){let s=++this._loadToken,i;try{i=await(0,U.loadMesh)(e)}catch(h){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:h,bubbles:!0}));return}if(s!==this._loadToken){try{i.dispose()}catch{}return}let a=r.getScene();if(!a){try{i.dispose()}catch{}return}let c=this.hasAttribute("normalize")?Ft(i.polygons):i.polygons;this._handle=a.add(c,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:c},bubbles:!0}));return}if(o){let s=r.getScene();if(!s)return;let i=this.getAttribute("size"),a=i!==null?parseFloat(i):1,u=this.getAttribute("color")??void 0,c;try{c=(0,U.resolveGeometry)(o,{size:Number.isFinite(a)?a:1,color:u})}catch(h){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:h,bubbles:!0}));return}this._handle=s.add(c,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:c},bubbles:!0}))}}}};var Nt=typeof HTMLElement<"u"?HTMLElement:class{};function Xt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function Vt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==2||t.some(e=>!Number.isFinite(e))))return[t[0],t[1]]}function Bt(n){return n.closest("glyph-scene")??null}var fe=class extends Nt{constructor(){super(...arguments);this._handle=null}static get observedAttributes(){return["at","size","hotspot-id"]}connectedCallback(){this._register()}disconnectedCallback(){this._handle&&this._unregister()}attributeChangedCallback(e,o,r){o!==r&&(this._handle&&this._unregister(),this._register())}_unregister(){if(!this._handle)return;let e=this._handle.el;for(;e.firstChild;)this.appendChild(e.firstChild);this._handle.remove(),this._handle=null}_register(){let e=Xt(this.getAttribute("at"));if(!e)return;let o=Bt(this);if(!o)return;if(!o.getScene()){let u=()=>{o.removeEventListener("glyphcss:scene-ready",u),this._register()};o.addEventListener("glyphcss:scene-ready",u);return}let r=o.getScene();if(!r)return;let s=this.getAttribute("hotspot-id")??this.getAttribute("id")??String(Math.random()),i=Vt(this.getAttribute("size"));this._handle=r.addHotspot({id:s,at:e,size:i},()=>this.dispatchEvent(new CustomEvent("glyphcss:hotspot-click",{detail:{id:s},bubbles:!0})));let a=this._handle.el;for(;this.firstChild;)a.appendChild(this.firstChild)}};var Wt=typeof HTMLElement<"u"?HTMLElement:class{};function F(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var ye=class extends Wt{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","distance","zoom","stretch"]}getCamera(){return this._camera}connectedCallback(){this._camera=j({rotX:F(this.getAttribute("rot-x")),rotY:F(this.getAttribute("rot-y")),distance:F(this.getAttribute("distance")),zoom:F(this.getAttribute("zoom")),stretch:F(this.getAttribute("stretch"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let s=this._camera;if(!s)return;let i=F(this.getAttribute("rot-x")),a=F(this.getAttribute("rot-y")),u=F(this.getAttribute("distance")),c=F(this.getAttribute("zoom")),h=F(this.getAttribute("stretch")),d=!1;i!==void 0&&s.rotX!==i&&(s.rotX=i,d=!0),a!==void 0&&s.rotY!==a&&(s.rotY=a,d=!0),u!==void 0&&s.distance!==u&&(s.distance=u,d=!0),c!==void 0&&s.zoom!==c&&(s.zoom=c,d=!0),h!==void 0&&s.stretch!==h&&(s.stretch=h,d=!0),d&&this.querySelector("glyph-scene")?.rerender?.()}};var $t=typeof HTMLElement<"u"?HTMLElement:class{};function q(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var ge=class extends $t{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","zoom"]}getCamera(){return this._camera}connectedCallback(){this._camera=ee({rotX:q(this.getAttribute("rot-x")),rotY:q(this.getAttribute("rot-y")),zoom:q(this.getAttribute("zoom"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let s=this._camera;if(!s)return;let i=q(this.getAttribute("rot-x")),a=q(this.getAttribute("rot-y")),u=q(this.getAttribute("zoom")),c=!1;i!==void 0&&s.rotX!==i&&(s.rotX=i,c=!0),a!==void 0&&s.rotY!==a&&(s.rotY=a,c=!0),u!==void 0&&s.zoom!==u&&(s.zoom=u,c=!0),c&&this.querySelector("glyph-scene")?.rerender?.()}};var jt=typeof HTMLElement<"u"?HTMLElement:class{};function Ut(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function Ie(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function qt(n){return n.closest("glyph-scene")??null}var be=class extends jt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert","animate-speed","animate-axis"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Ie(this.getAttribute("drag")),o=Ie(this.getAttribute("wheel")),r=Ie(this.getAttribute("invert")),s=Ut(this.getAttribute("animate-speed")),i=this.getAttribute("animate-axis")==="x"?"x":"y";return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{},...s!==void 0?{animate:{speed:s,axis:i}}:{}}}_attach(){if(this._controls)return;let e=qt(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=de(o,this._readOptions())}};var Kt=typeof HTMLElement<"u"?HTMLElement:class{};function Fe(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Zt(n){return n.closest("glyph-scene")??null}var ve=class extends Kt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Fe(this.getAttribute("drag")),o=Fe(this.getAttribute("wheel")),r=Fe(this.getAttribute("invert"));return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{}}}_attach(){if(this._controls)return;let e=Zt(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=pe(o,this._readOptions())}};T(H,require("@glyphcss/core"),module.exports);0&&(module.exports={DEFAULT_RAMP,GlyphHotspotElement,GlyphMapControlsElement,GlyphMeshElement,GlyphOrbitControlsElement,GlyphOrthographicCameraElement,GlyphPerspectiveCameraElement,GlyphSceneElement,SOLID_RAMP,WIREFRAME_GLYPHS,WIREFRAME_PALETTES,bakeFrames,buildRasterizeContext,createGlyphCamera,createGlyphFirstPersonControls,createGlyphMapControls,createGlyphOrbitControls,createGlyphOrthographicCamera,createGlyphPerspectiveCamera,createGlyphScene,findGlyphMeshHandle,findMeshUnderPoint,getWireframeGlyphs,injectGlyphBaseStyles,pointInMeshElement,projectHotspots,rasterize,...require("@glyphcss/core")});
|
|
62
|
+
`;function ce(n,t,e,o,r){return n.map(s=>{let[i,a,u]=t.project(s.at,e,o,r),c=u>-3&&i>=0&&i<e&&a>=0&&a<o;return{id:s.id,col:i,row:a,depth:u,visible:c}})}var Ht=1;function Tt(n,t){let{position:e,scale:o,rotation:r}=t;if(!e&&!o&&!r)return n;let[s,i,a]=e??[0,0,0],u=1,c=1,h=1;o!==void 0&&(typeof o=="number"?u=c=h=o:[u,c,h]=o);let[d,f,m]=r??[0,0,0],g=Math.cos(d),L=Math.sin(d),E=Math.cos(f),S=Math.sin(f),A=Math.cos(m),M=Math.sin(m);function x(p){let b=p[0]*u,l=p[1]*c,v=p[2]*h,G=A*b-M*l,C=M*b+A*l,y=v;return b=E*G+S*y,l=C,v=-S*G+E*y,G=b,C=g*l-L*v,y=L*l+g*v,[G+s,C+i,y+a]}return n.map(p=>({...p,vertices:p.vertices.map(x)}))}function ue(n,t={}){ae(n.ownerDocument??void 0);let e={mode:t.mode??"solid",glyphPalette:t.glyphPalette??"default",useColors:t.useColors??!0,cols:t.cols??80,rows:t.rows??24,cellAspect:t.cellAspect??2,directionalLight:t.directionalLight??{direction:[.5,.7,.5],intensity:1},ambientLight:t.ambientLight??{intensity:.4},camera:t.camera??j(),smoothShading:t.smoothShading??!1,creaseAngle:t.creaseAngle??60,autoSize:t.autoSize??!1},o=n.ownerDocument.createElement("div");o.className="glyph-scene";let r=n.ownerDocument.createElement("pre");r.className="glyph-output";let s=n.ownerDocument.createElement("div");s.className="glyph-hotspot-layer",o.appendChild(r),o.appendChild(s),n.appendChild(o);let i=new Map,a=[],u=!1;function c(){u||(u=!0,Promise.resolve().then(()=>{u=!1,h()}))}function h(){let p=[];for(let v of i.values()){let G=Tt(v.polygons,v.transform);for(let C of G)p.push(C)}let b=le({camera:e.camera,grid:{cols:e.cols,rows:e.rows,cellAspect:e.cellAspect},polygons:p,mode:e.mode,directionalLight:e.directionalLight,ambientLight:e.ambientLight,glyphPalette:e.glyphPalette,useColors:e.useColors,smoothShading:e.smoothShading,creaseAngle:e.creaseAngle}),l=re(b);e.useColors?r.innerHTML=l:r.textContent=l,d()}function d(){let{cols:p,rows:b,cellAspect:l,camera:v}=e,G=ce(a.map(_=>_.hotspot),v,p,b,l),C=r.getBoundingClientRect(),y=p>0?C.width/p:8,w=b>0?C.height/b:16;for(let _=0;_<a.length;_++){let{el:P}=a[_],z=G[_];z.visible?(P.style.display="",P.style.left=`${(z.col+.5)*y}px`,P.style.top=`${(z.row+.5)*w}px`,P.style.zIndex=String(Math.round(z.depth*1e3))):P.style.display="none"}}function f(p,b={}){let l=Ht++;return i.set(l,{id:l,polygons:p,transform:b}),c(),{get id(){return l},get name(){return i.get(l)?.transform.id},get polygons(){return p},setTransform(v){let G=i.get(l);G&&(G.transform=v,c())},dispose(){i.delete(l),c()}}}function m(p,b){let l=n.ownerDocument.createElement("div");l.className="glyph-hotspot",l.setAttribute("data-hotspot-id",p.id);let[v,G]=p.size??[1,1];l.style.position="absolute",l.style.width=`${v}ch`,l.style.height=`${G*e.cellAspect}ch`,b&&l.addEventListener("click",b),s.appendChild(l);let C={hotspot:{id:p.id,at:p.at,size:p.size},el:l,onClick:b};return a.push(C),c(),{get el(){return l},remove(){let y=a.indexOf(C);y>=0&&a.splice(y,1),b&&l.removeEventListener("click",b),s.removeChild(l),c()}}}function g(){h()}function L(p){p.mode!==void 0&&(e.mode=p.mode),p.glyphPalette!==void 0&&(e.glyphPalette=p.glyphPalette),p.useColors!==void 0&&(e.useColors=p.useColors),p.cols!==void 0&&(e.cols=p.cols),p.rows!==void 0&&(e.rows=p.rows),p.cellAspect!==void 0&&(e.cellAspect=p.cellAspect),p.directionalLight!==void 0&&(e.directionalLight=p.directionalLight),p.ambientLight!==void 0&&(e.ambientLight=p.ambientLight),p.camera!==void 0&&(e.camera=p.camera),p.smoothShading!==void 0&&(e.smoothShading=p.smoothShading),p.creaseAngle!==void 0&&(e.creaseAngle=p.creaseAngle),p.autoSize!==void 0&&(e.autoSize=p.autoSize,e.autoSize&&!M&&typeof ResizeObserver<"u"?(M=new ResizeObserver(()=>A()),M.observe(n),A()):!e.autoSize&&M&&(M.disconnect(),M=null)),c()}function E(){return{...e}}function S(){let p=n.ownerDocument.createElement("span");p.textContent="M",p.style.cssText="position:absolute;visibility:hidden;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;padding:0;margin:0",r.appendChild(p);let b=p.getBoundingClientRect();return p.remove(),{w:b.width||8,h:b.height||16}}function A(){let p=n.clientWidth,b=n.clientHeight;if(!p||!b)return;let l=S(),v=Math.max(20,Math.floor(p/l.w)),G=Math.max(8,Math.floor(b/l.h)),C=l.h/l.w,y=!1;e.cols!==v&&(e.cols=v,y=!0),e.rows!==G&&(e.rows=G,y=!0),Math.abs(e.cellAspect-C)>.01&&(e.cellAspect=C,y=!0),y&&c()}let M=null;e.autoSize&&typeof ResizeObserver<"u"&&(M=new ResizeObserver(()=>A()),M.observe(n),A());function x(){M&&(M.disconnect(),M=null),i.clear(),n.contains(o)&&n.removeChild(o)}return c(),{get host(){return n},get output(){return r},get camera(){return e.camera},add:f,addHotspot:m,rerender:g,setOptions:L,getOptions:E,fit:A,destroy:x}}function de(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,s=Ze(t.invert),i=t.animate??!1,a=!1,u=!1,c=null,h=null,d=null,f={x:0,y:0},m=n.camera;function g(l){if(!(!o||a)&&d===null&&l.isPrimary!==!1){l.preventDefault(),d=l.pointerId,f={x:l.clientX,y:l.clientY},e.style.cursor="grabbing";try{l.target.setPointerCapture(l.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(u=!0)}}function L(l){if(d===null||l.pointerId!==d||!o||a)return;l.preventDefault();let v=l.clientX-f.x,G=l.clientY-f.y;f={x:l.clientX,y:l.clientY};let C=s,w=1/4*Math.PI/180;m.rotY=m.rotY-v*w*C,m.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,m.rotX-G*w*C)),n.rerender()}function E(l){if(d===l.pointerId){d=null,e.style.cursor=o&&!a?"grab":"";try{l.target.releasePointerCapture(l.pointerId)}catch{}i&&(u=!1)}}function S(l){if(!r||a)return;l.preventDefault();let v=l.deltaY*.001;m.zoom=Math.max(.05,Math.min(10,m.zoom*(1-v))),n.rerender()}function A(l){if(!(a||!i)){if(!u){let v=h!==null?Math.min(l-h,50):16.67,G=typeof i=="object"&&i.speed?i.speed:.3,C=typeof i=="object"&&i.axis?i.axis:"y",y=G*(Math.PI/180)*(v/16.67);C==="y"?m.rotY=m.rotY+y:m.rotX=m.rotX+y,n.rerender()}h=l,c=requestAnimationFrame(A)}}function M(){c===null&&typeof requestAnimationFrame<"u"&&i&&(c=requestAnimationFrame(A))}function x(){c!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(c),c=null),h=null}function p(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),e.addEventListener("wheel",S,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.removeEventListener("wheel",S),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return p(),M(),{update(l){let v=!!i;o=l.drag??o,r=l.wheel??r,s=Ze(l.invert),i=l.animate??i,!a&&d===null&&(e.style.cursor=o?"grab":"");let G=!!i;v&&!G?x():!v&&G&&M()},pause(){a||(a=!0,b(),x(),d=null,u=!1)},resume(){a&&(a=!1,p(),M())},destroy(){a||b(),x(),a=!0}}}function Ze(n){return n===void 0||n===!1?1:n===!0?-1:n}function pe(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,s=Je(t.invert),i=t.animate??!1,a=!1,u=!1,c=null,h=null,d=null,f={x:0,y:0},m=!1,g=n.camera,L=1/4*Math.PI/180,E=.02;function S(y){if(!(!o||a)&&d===null&&y.isPrimary!==!1){y.preventDefault(),d=y.pointerId,f={x:y.clientX,y:y.clientY},m=y.button===2,e.style.cursor="grabbing";try{y.target.setPointerCapture(y.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(u=!0)}}function A(y){if(d===null||y.pointerId!==d||!o||a)return;y.preventDefault();let w=y.clientX-f.x,_=y.clientY-f.y;f={x:y.clientX,y:y.clientY};let P=s;if(m||y.shiftKey)g.rotY=g.rotY-w*L*P,g.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,g.rotX+_*L*P));else{let z=g.target;g.target=[z[0]-w*E/g.zoom,z[1]-_*E/g.zoom,z[2]]}n.rerender()}function M(y){if(d===y.pointerId){d=null,m=!1,e.style.cursor=o&&!a?"grab":"";try{y.target.releasePointerCapture(y.pointerId)}catch{}i&&(u=!1)}}function x(y){y.preventDefault()}function p(y){if(!r||a)return;y.preventDefault();let w=y.deltaY*.001;g.zoom=Math.max(.05,Math.min(10,g.zoom*(1-w))),n.rerender()}function b(y){if(!(a||!i)){if(!u){let w=h!==null?Math.min(y-h,50):16.67,_=typeof i=="object"&&i.speed?i.speed:.3,P=typeof i=="object"&&i.axis?i.axis:"y",z=_*(Math.PI/180)*(w/16.67);P==="y"?g.rotY=g.rotY+z:g.rotX=g.rotX+z,n.rerender()}h=y,c=requestAnimationFrame(b)}}function l(){c===null&&typeof requestAnimationFrame<"u"&&i&&(c=requestAnimationFrame(b))}function v(){c!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(c),c=null),h=null}function G(){e.addEventListener("pointerdown",S),e.addEventListener("pointermove",A),e.addEventListener("pointerup",M),e.addEventListener("pointercancel",M),e.addEventListener("contextmenu",x),e.addEventListener("wheel",p,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function C(){e.removeEventListener("pointerdown",S),e.removeEventListener("pointermove",A),e.removeEventListener("pointerup",M),e.removeEventListener("pointercancel",M),e.removeEventListener("contextmenu",x),e.removeEventListener("wheel",p),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return G(),l(),{update(y){let w=!!i;o=y.drag??o,r=y.wheel??r,s=Je(y.invert),i=y.animate??i,!a&&d===null&&(e.style.cursor=o?"grab":"");let _=!!i;w&&!_?v():!w&&_&&l()},pause(){a||(a=!0,C(),v(),d=null,u=!1)},resume(){a&&(a=!1,G(),l())},destroy(){a||C(),v(),a=!0}}}function Je(n){return n===void 0||n===!1?1:n===!0?-1:n}function et(n,t={}){if(n.camera.kind!=="perspective")throw new Error("glyphcss: GlyphFirstPersonControls requires a perspective camera. Use <GlyphPerspectiveCamera> (not <GlyphOrthographicCamera> / <GlyphCamera>).");n.camera.eyeMode=!0;let e=n.host,o=t.drag??!0,r=t.keyboard??!0,s=t.moveSpeed??.05,i=t.lookSpeed??.004,a=Qe(t.invert),u=!1,c=null,h={x:0,y:0},d=new Set,f=null,m=n.camera;function g(l){if(!(!o||u)&&c===null){l.preventDefault(),c=l.pointerId,h={x:l.clientX,y:l.clientY};try{l.target.setPointerCapture(l.pointerId)}catch{}}}function L(l){if(c===null||l.pointerId!==c||!o||u)return;l.preventDefault();let v=l.clientX-h.x,G=l.clientY-h.y;h={x:l.clientX,y:l.clientY},m.rotY=m.rotY-v*i*a,m.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,m.rotX+G*i*a)),n.rerender()}function E(l){if(c===l.pointerId){c=null;try{l.target.releasePointerCapture(l.pointerId)}catch{}}}function S(l){r&&!u&&d.add(l.key.toLowerCase())}function A(l){d.delete(l.key.toLowerCase())}function M(){if(u||!r||d.size===0)return;let l=m.target,v=Math.cos(m.rotY),G=Math.sin(m.rotY),C=!1;(d.has("w")||d.has("arrowup"))&&(m.target=[l[0]-G*s,l[1]-v*s,l[2]],C=!0),(d.has("s")||d.has("arrowdown"))&&(m.target=[l[0]+G*s,l[1]+v*s,l[2]],C=!0),(d.has("a")||d.has("arrowleft"))&&(m.target=[l[0]-v*s,l[1]+G*s,l[2]],C=!0),(d.has("d")||d.has("arrowright"))&&(m.target=[l[0]+v*s,l[1]-G*s,l[2]],C=!0),C&&n.rerender()}function x(){u||(M(),f=requestAnimationFrame(x))}function p(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),r&&(e.ownerDocument?.addEventListener("keydown",S),e.ownerDocument?.addEventListener("keyup",A)),e.style.touchAction="none",e.style.userSelect="none",typeof requestAnimationFrame<"u"&&(f=requestAnimationFrame(x))}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.ownerDocument?.removeEventListener("keydown",S),e.ownerDocument?.removeEventListener("keyup",A),e.style.touchAction="",e.style.userSelect="",f!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(f),f=null),d.clear(),n.camera.eyeMode=!1}return p(),{update(l){o=l.drag??o,r=l.keyboard??r,s=l.moveSpeed??s,i=l.lookSpeed??i,a=Qe(l.invert)},pause(){u||(u=!0,b(),c=null)},resume(){u&&(u=!1,p())},destroy(){u||b(),u=!0}}}function Qe(n){return n===void 0||n===!1?1:n===!0?-1:n}function tt(n,t){let e=n.querySelector(`[data-glyph-mesh-id="${CSS.escape(t)}"]`);return e instanceof HTMLElement?e:null}function ke(n,t,e){let o=n.getBoundingClientRect();return o.width<=0||o.height<=0?!1:t>=o.left&&t<=o.right&&e>=o.top&&e<=o.bottom}function nt(n,t,e){let o=(n instanceof Document,n),r=Array.from(o.querySelectorAll(".glyph-mesh"));for(let s of r)if(ke(s,t,e))return s;return null}var zt=typeof HTMLElement<"u"?HTMLElement:class{},Pt=["mode","glyph-palette","use-colors","cols","rows","cell-aspect","directional-direction","directional-intensity","ambient-intensity","auto-size"];function oe(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function Ot(n){if(n==="wireframe"||n==="solid"||n==="voxel")return n}function kt(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}var he=class extends zt{constructor(){super(...arguments);this._scene=null}static get observedAttributes(){return[...Pt]}getScene(){return this._scene}_readOptions(){let e={},o=Ot(this.getAttribute("mode"));o!==void 0&&(e.mode=o);let r=this.getAttribute("glyph-palette");r&&(e.glyphPalette=r);let s=kt(this.getAttribute("use-colors"));s!==void 0&&(e.useColors=s);let i=oe(this.getAttribute("cols"));i!==void 0&&(e.cols=i);let a=oe(this.getAttribute("rows"));a!==void 0&&(e.rows=a);let u=oe(this.getAttribute("cell-aspect"));u!==void 0&&(e.cellAspect=u);let c=oe(this.getAttribute("directional-intensity"));c!==void 0&&(e.directionalLight={direction:[.5,.7,.5],intensity:c});let h=oe(this.getAttribute("ambient-intensity"));return h!==void 0&&(e.ambientLight={intensity:h}),this.hasAttribute("auto-size")&&(e.autoSize=!0),e}_findCameraAncestor(){let e=this.parentElement;for(;e;){let o=e.tagName.toLowerCase();if(o==="glyph-perspective-camera"||o==="glyph-orthographic-camera"||o==="glyph-camera")return e;e=e.parentElement}return null}_initScene(e){let o=typeof e.getCamera=="function"?e.getCamera():void 0,r=this._readOptions();o&&(r.camera=o),this._scene=ue(this,r),this.dispatchEvent(new CustomEvent("glyphcss:scene-ready",{bubbles:!1}))}connectedCallback(){if(this._scene)return;let e=this._findCameraAncestor();if(!e)throw new Error("glyphcss: <glyph-scene> must be placed inside a <glyph-camera>, <glyph-perspective-camera>, or <glyph-orthographic-camera>.");if((typeof e.getCamera=="function"?e.getCamera():null)!==null)this._initScene(e);else{let r=()=>{e.removeEventListener("glyph:camera-ready",r),this._scene||this._initScene(e)};e.addEventListener("glyph:camera-ready",r)}}rerender(){this._scene?.rerender()}disconnectedCallback(){this._scene&&(this._scene.destroy(),this._scene=null)}attributeChangedCallback(e,o,r){o!==r&&this._scene&&this._scene.setOptions(this._readOptions())}};var U=require("@glyphcss/core"),Rt=typeof HTMLElement<"u"?HTMLElement:class{},It=["src","geometry","size","color","position","scale","rotation","normalize"];function Ft(n){let t=(0,U.computeSceneBbox)(n),e=(t.min[0]+t.max[0])/2,o=(t.min[1]+t.max[1])/2,r=(t.min[2]+t.max[2])/2,i=2/(Math.max(t.max[0]-t.min[0],t.max[1]-t.min[1],t.max[2]-t.min[2])||1);return n.map(a=>({...a,vertices:a.vertices.map(u=>[(u[0]-e)*i,(u[1]-o)*i,(u[2]-r)*i])}))}function Re(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function Yt(n){if(n){if(!n.includes(",")){let t=parseFloat(n);return Number.isFinite(t)?t:void 0}return Re(n)}}function Dt(n){return n.closest("glyph-scene")??null}var me=class extends Rt{constructor(){super(...arguments);this._handle=null;this._loadToken=0}static get observedAttributes(){return[...It]}getMeshHandle(){return this._handle}connectedCallback(){this._maybeLoad()}disconnectedCallback(){this._tearDown()}attributeChangedCallback(e,o,r){if(o!==r){if(e==="src"||e==="geometry"||e==="size"||e==="color"){this._tearDown(),this._maybeLoad();return}this._handle&&this._handle.setTransform(this._readTransform())}}_readTransform(){return{position:Re(this.getAttribute("position")),scale:Yt(this.getAttribute("scale")),rotation:Re(this.getAttribute("rotation"))}}_tearDown(){if(this._loadToken+=1,this._handle){try{this._handle.dispose()}catch{}this._handle=null}}async _maybeLoad(){let e=this.getAttribute("src"),o=this.getAttribute("geometry"),r=Dt(this);if(r){if(!r.getScene()){let s=()=>{r.removeEventListener("glyphcss:scene-ready",s),this._maybeLoad()};r.addEventListener("glyphcss:scene-ready",s);return}if(e){let s=++this._loadToken,i;try{i=await(0,U.loadMesh)(e)}catch(h){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:h,bubbles:!0}));return}if(s!==this._loadToken){try{i.dispose()}catch{}return}let a=r.getScene();if(!a){try{i.dispose()}catch{}return}let c=this.hasAttribute("normalize")?Ft(i.polygons):i.polygons;this._handle=a.add(c,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:c},bubbles:!0}));return}if(o){let s=r.getScene();if(!s)return;let i=this.getAttribute("size"),a=i!==null?parseFloat(i):1,u=this.getAttribute("color")??void 0,c;try{c=(0,U.resolveGeometry)(o,{size:Number.isFinite(a)?a:1,color:u})}catch(h){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:h,bubbles:!0}));return}this._handle=s.add(c,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:c},bubbles:!0}))}}}};var Nt=typeof HTMLElement<"u"?HTMLElement:class{};function Xt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function Vt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==2||t.some(e=>!Number.isFinite(e))))return[t[0],t[1]]}function Bt(n){return n.closest("glyph-scene")??null}var fe=class extends Nt{constructor(){super(...arguments);this._handle=null}static get observedAttributes(){return["at","size","hotspot-id"]}connectedCallback(){this._register()}disconnectedCallback(){this._handle&&this._unregister()}attributeChangedCallback(e,o,r){o!==r&&(this._handle&&this._unregister(),this._register())}_unregister(){if(!this._handle)return;let e=this._handle.el;for(;e.firstChild;)this.appendChild(e.firstChild);this._handle.remove(),this._handle=null}_register(){let e=Xt(this.getAttribute("at"));if(!e)return;let o=Bt(this);if(!o)return;if(!o.getScene()){let u=()=>{o.removeEventListener("glyphcss:scene-ready",u),this._register()};o.addEventListener("glyphcss:scene-ready",u);return}let r=o.getScene();if(!r)return;let s=this.getAttribute("hotspot-id")??this.getAttribute("id")??String(Math.random()),i=Vt(this.getAttribute("size"));this._handle=r.addHotspot({id:s,at:e,size:i},()=>this.dispatchEvent(new CustomEvent("glyphcss:hotspot-click",{detail:{id:s},bubbles:!0})));let a=this._handle.el;for(;this.firstChild;)a.appendChild(this.firstChild)}};var Wt=typeof HTMLElement<"u"?HTMLElement:class{};function F(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var ye=class extends Wt{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","distance","zoom","stretch"]}getCamera(){return this._camera}connectedCallback(){this._camera=j({rotX:F(this.getAttribute("rot-x")),rotY:F(this.getAttribute("rot-y")),distance:F(this.getAttribute("distance")),zoom:F(this.getAttribute("zoom")),stretch:F(this.getAttribute("stretch"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let s=this._camera;if(!s)return;let i=F(this.getAttribute("rot-x")),a=F(this.getAttribute("rot-y")),u=F(this.getAttribute("distance")),c=F(this.getAttribute("zoom")),h=F(this.getAttribute("stretch")),d=!1;i!==void 0&&s.rotX!==i&&(s.rotX=i,d=!0),a!==void 0&&s.rotY!==a&&(s.rotY=a,d=!0),u!==void 0&&s.distance!==u&&(s.distance=u,d=!0),c!==void 0&&s.zoom!==c&&(s.zoom=c,d=!0),h!==void 0&&s.stretch!==h&&(s.stretch=h,d=!0),d&&this.querySelector("glyph-scene")?.rerender?.()}};var $t=typeof HTMLElement<"u"?HTMLElement:class{};function q(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var ge=class extends $t{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","zoom"]}getCamera(){return this._camera}connectedCallback(){this._camera=ee({rotX:q(this.getAttribute("rot-x")),rotY:q(this.getAttribute("rot-y")),zoom:q(this.getAttribute("zoom"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let s=this._camera;if(!s)return;let i=q(this.getAttribute("rot-x")),a=q(this.getAttribute("rot-y")),u=q(this.getAttribute("zoom")),c=!1;i!==void 0&&s.rotX!==i&&(s.rotX=i,c=!0),a!==void 0&&s.rotY!==a&&(s.rotY=a,c=!0),u!==void 0&&s.zoom!==u&&(s.zoom=u,c=!0),c&&this.querySelector("glyph-scene")?.rerender?.()}};var jt=typeof HTMLElement<"u"?HTMLElement:class{};function Ut(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function Ie(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function qt(n){return n.closest("glyph-scene")??null}var be=class extends jt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert","animate-speed","animate-axis"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Ie(this.getAttribute("drag")),o=Ie(this.getAttribute("wheel")),r=Ie(this.getAttribute("invert")),s=Ut(this.getAttribute("animate-speed")),i=this.getAttribute("animate-axis")==="x"?"x":"y";return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{},...s!==void 0?{animate:{speed:s,axis:i}}:{}}}_attach(){if(this._controls)return;let e=qt(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=de(o,this._readOptions())}};var Kt=typeof HTMLElement<"u"?HTMLElement:class{};function Fe(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Zt(n){return n.closest("glyph-scene")??null}var ve=class extends Kt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Fe(this.getAttribute("drag")),o=Fe(this.getAttribute("wheel")),r=Fe(this.getAttribute("invert"));return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{}}}_attach(){if(this._controls)return;let e=Zt(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=pe(o,this._readOptions())}};T(H,require("@glyphcss/core"),module.exports);0&&(module.exports={DEFAULT_RAMP,GlyphHotspotElement,GlyphMapControlsElement,GlyphMeshElement,GlyphOrbitControlsElement,GlyphOrthographicCameraElement,GlyphPerspectiveCameraElement,GlyphSceneElement,SOLID_RAMP,WIREFRAME_GLYPHS,WIREFRAME_PALETTES,bakeFrames,buildRasterizeContext,createGlyphCamera,createGlyphFirstPersonControls,createGlyphMapControls,createGlyphOrbitControls,createGlyphOrthographicCamera,createGlyphPerspectiveCamera,createGlyphScene,findGlyphMeshHandle,findMeshUnderPoint,getWireframeGlyphs,injectGlyphBaseStyles,pointInMeshElement,projectHotspots,rasterize,...require("@glyphcss/core")});
|
package/dist/index.js
CHANGED
|
@@ -59,4 +59,4 @@ function Fe(n,t,e){let o=Math.cos(t),r=Math.sin(t),s=o*n[1]-r*n[0],i=r*n[1]+o*n[
|
|
|
59
59
|
the content from the 3D vertex being labelled. */
|
|
60
60
|
transform: translate(-50%, -50%);
|
|
61
61
|
}
|
|
62
|
-
`;function ve(n,t,e,o,r){return n.map(s=>{let[i,a,u]=t.project(s.at,e,o,r),c=u>-3&&i>=0&&i<e&&a>=0&&a<o;return{id:s.id,col:i,row:a,depth:u,visible:c}})}var gt=1;function bt(n,t){let{position:e,scale:o,rotation:r}=t;if(!e&&!o&&!r)return n;let[s,i,a]=e??[0,0,0],u=1,c=1,h=1;o!==void 0&&(typeof o=="number"?u=c=h=o:[u,c,h]=o);let[d,f,m]=r??[0,0,0],g=Math.cos(d),L=Math.sin(d),E=Math.cos(f),S=Math.sin(f),A=Math.cos(m),M=Math.sin(m);function x(p){let b=p[0]*u,l=p[1]*c,v=p[2]*h,G=A*b-M*l,C=M*b+A*l,y=v;return b=E*G+S*y,l=C,v=-S*G+E*y,G=b,C=g*l-L*v,y=L*l+g*v,[G+s,C+i,y+a]}return n.map(p=>({...p,vertices:p.vertices.map(x)}))}function Ee(n,t={}){be(n.ownerDocument??void 0);let e={mode:t.mode??"solid",glyphPalette:t.glyphPalette??"default",useColors:t.useColors??!0,cols:t.cols??80,rows:t.rows??24,cellAspect:t.cellAspect??2,directionalLight:t.directionalLight??{direction:[.5,.7,.5],intensity:1},ambientLight:t.ambientLight??{intensity:.4},camera:t.camera??K(),smoothShading:t.smoothShading??!1,creaseAngle:t.creaseAngle??60,autoSize:t.autoSize??!1},o=n.ownerDocument.createElement("div");o.className="glyph-scene";let r=n.ownerDocument.createElement("pre");r.className="glyph-output";let s=n.ownerDocument.createElement("div");s.className="glyph-hotspot-layer",o.appendChild(r),o.appendChild(s),n.appendChild(o);let i=new Map,a=[],u=!1;function c(){u||(u=!0,Promise.resolve().then(()=>{u=!1,h()}))}function h(){let p=[];for(let v of i.values()){let G=bt(v.polygons,v.transform);for(let C of G)p.push(C)}let b=fe({camera:e.camera,grid:{cols:e.cols,rows:e.rows,cellAspect:e.cellAspect},polygons:p,mode:e.mode,directionalLight:e.directionalLight,ambientLight:e.ambientLight,glyphPalette:e.glyphPalette,useColors:e.useColors,smoothShading:e.smoothShading,creaseAngle:e.creaseAngle}),l=re(b);e.useColors?r.innerHTML=l:r.textContent=l,d()}function d(){let{cols:p,rows:b,cellAspect:l,camera:v}=e,G=ve(a.map(_=>_.hotspot),v,p,b,l),C=r.getBoundingClientRect(),y=p>0?C.width/p:8,w=b>0?C.height/b:16;for(let _=0;_<a.length;_++){let{el:T}=a[_],H=G[_];H.visible?(T.style.display="",T.style.left=`${(H.col+.5)*y}px`,T.style.top=`${(H.row+.5)*w}px`,T.style.zIndex=String(Math.round(H.depth*1e3))):T.style.display="none"}}function f(p,b={}){let l=gt++;return i.set(l,{id:l,polygons:p,transform:b}),c(),{get id(){return l},get name(){return i.get(l)?.transform.id},get polygons(){return p},setTransform(v){let G=i.get(l);G&&(G.transform=v,c())},dispose(){i.delete(l),c()}}}function m(p,b){let l=n.ownerDocument.createElement("div");l.className="glyph-hotspot",l.setAttribute("data-hotspot-id",p.id);let[v,G]=p.size??[1,1];l.style.position="absolute",l.style.width=`${v}ch`,l.style.height=`${G*e.cellAspect}ch`,b&&l.addEventListener("click",b),s.appendChild(l);let C={hotspot:{id:p.id,at:p.at,size:p.size},el:l,onClick:b};return a.push(C),c(),{get el(){return l},remove(){let y=a.indexOf(C);y>=0&&a.splice(y,1),b&&l.removeEventListener("click",b),s.removeChild(l),c()}}}function g(){h()}function L(p){p.mode!==void 0&&(e.mode=p.mode),p.glyphPalette!==void 0&&(e.glyphPalette=p.glyphPalette),p.useColors!==void 0&&(e.useColors=p.useColors),p.cols!==void 0&&(e.cols=p.cols),p.rows!==void 0&&(e.rows=p.rows),p.cellAspect!==void 0&&(e.cellAspect=p.cellAspect),p.directionalLight!==void 0&&(e.directionalLight=p.directionalLight),p.ambientLight!==void 0&&(e.ambientLight=p.ambientLight),p.camera!==void 0&&(e.camera=p.camera),p.smoothShading!==void 0&&(e.smoothShading=p.smoothShading),p.creaseAngle!==void 0&&(e.creaseAngle=p.creaseAngle),p.autoSize!==void 0&&(e.autoSize=p.autoSize,e.autoSize&&!M&&typeof ResizeObserver<"u"?(M=new ResizeObserver(()=>A()),M.observe(n),A()):!e.autoSize&&M&&(M.disconnect(),M=null)),c()}function E(){return{...e}}function S(){let p=n.ownerDocument.createElement("span");p.textContent="M",p.style.cssText="position:absolute;visibility:hidden;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;padding:0;margin:0",r.appendChild(p);let b=p.getBoundingClientRect();return p.remove(),{w:b.width||8,h:b.height||16}}function A(){let p=n.clientWidth,b=n.clientHeight;if(!p||!b)return;let l=S(),v=Math.max(20,Math.floor(p/l.w)),G=Math.max(8,Math.floor(b/l.h)),C=l.h/l.w,y=!1;e.cols!==v&&(e.cols=v,y=!0),e.rows!==G&&(e.rows=G,y=!0),Math.abs(e.cellAspect-C)>.01&&(e.cellAspect=C,y=!0),y&&c()}let M=null;e.autoSize&&typeof ResizeObserver<"u"&&(M=new ResizeObserver(()=>A()),M.observe(n),A());function x(){M&&(M.disconnect(),M=null),i.clear(),n.contains(o)&&n.removeChild(o)}return c(),{get host(){return n},get output(){return r},get camera(){return e.camera},add:f,addHotspot:m,rerender:g,setOptions:L,getOptions:E,fit:A,destroy:x}}function Ge(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,s=De(t.invert),i=t.animate??!1,a=!1,u=!1,c=null,h=null,d=null,f={x:0,y:0},m=n.camera;function g(l){if(!(!o||a)&&d===null&&l.isPrimary!==!1){l.preventDefault(),d=l.pointerId,f={x:l.clientX,y:l.clientY},e.style.cursor="grabbing";try{l.target.setPointerCapture(l.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(u=!0)}}function L(l){if(d===null||l.pointerId!==d||!o||a)return;l.preventDefault();let v=l.clientX-f.x,G=l.clientY-f.y;f={x:l.clientX,y:l.clientY};let C=s,w=1/4*Math.PI/180;m.rotY=m.rotY-v*w*C,m.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,m.rotX-G*w*C)),n.rerender()}function E(l){if(d===l.pointerId){d=null,e.style.cursor=o&&!a?"grab":"";try{l.target.releasePointerCapture(l.pointerId)}catch{}i&&(u=!1)}}function S(l){if(!r||a)return;l.preventDefault();let v=l.deltaY*.001;m.zoom=Math.max(.05,Math.min(10,m.zoom*(1-v))),n.rerender()}function A(l){if(!(a||!i)){if(!u){let v=h!==null?Math.min(l-h,50):16.67,G=typeof i=="object"&&i.speed?i.speed:.3,C=typeof i=="object"&&i.axis?i.axis:"y",y=G*(Math.PI/180)*(v/16.67);C==="y"?m.rotY=m.rotY+y:m.rotX=m.rotX+y,n.rerender()}h=l,c=requestAnimationFrame(A)}}function M(){c===null&&typeof requestAnimationFrame<"u"&&i&&(c=requestAnimationFrame(A))}function x(){c!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(c),c=null),h=null}function p(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),e.addEventListener("wheel",S,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.removeEventListener("wheel",S),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return p(),M(),{update(l){let v=!!i;o=l.drag??o,r=l.wheel??r,s=De(l.invert),i=l.animate??i,!a&&d===null&&(e.style.cursor=o?"grab":"");let G=!!i;v&&!G?x():!v&&G&&M()},pause(){a||(a=!0,b(),x(),d=null,u=!1)},resume(){a&&(a=!1,p(),M())},destroy(){a||b(),x(),a=!0}}}function De(n){return n===void 0||n===!1?1:n===!0?-1:n}function Me(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,s=Ne(t.invert),i=t.animate??!1,a=!1,u=!1,c=null,h=null,d=null,f={x:0,y:0},m=!1,g=n.camera,L=1/4*Math.PI/180,E=.02;function S(y){if(!(!o||a)&&d===null&&y.isPrimary!==!1){y.preventDefault(),d=y.pointerId,f={x:y.clientX,y:y.clientY},m=y.button===2,e.style.cursor="grabbing";try{y.target.setPointerCapture(y.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(u=!0)}}function A(y){if(d===null||y.pointerId!==d||!o||a)return;y.preventDefault();let w=y.clientX-f.x,_=y.clientY-f.y;f={x:y.clientX,y:y.clientY};let T=s;if(m||y.shiftKey)g.rotY=g.rotY-w*L*T,g.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,g.rotX+_*L*T));else{let H=g.target;g.target=[H[0]-w*E/g.zoom,H[1]-_*E/g.zoom,H[2]]}n.rerender()}function M(y){if(d===y.pointerId){d=null,m=!1,e.style.cursor=o&&!a?"grab":"";try{y.target.releasePointerCapture(y.pointerId)}catch{}i&&(u=!1)}}function x(y){y.preventDefault()}function p(y){if(!r||a)return;y.preventDefault();let w=y.deltaY*.001;g.zoom=Math.max(.05,Math.min(10,g.zoom*(1-w))),n.rerender()}function b(y){if(!(a||!i)){if(!u){let w=h!==null?Math.min(y-h,50):16.67,_=typeof i=="object"&&i.speed?i.speed:.3,T=typeof i=="object"&&i.axis?i.axis:"y",H=_*(Math.PI/180)*(w/16.67);T==="y"?g.rotY=g.rotY+H:g.rotX=g.rotX+H,n.rerender()}h=y,c=requestAnimationFrame(b)}}function l(){c===null&&typeof requestAnimationFrame<"u"&&i&&(c=requestAnimationFrame(b))}function v(){c!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(c),c=null),h=null}function G(){e.addEventListener("pointerdown",S),e.addEventListener("pointermove",A),e.addEventListener("pointerup",M),e.addEventListener("pointercancel",M),e.addEventListener("contextmenu",x),e.addEventListener("wheel",p,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function C(){e.removeEventListener("pointerdown",S),e.removeEventListener("pointermove",A),e.removeEventListener("pointerup",M),e.removeEventListener("pointercancel",M),e.removeEventListener("contextmenu",x),e.removeEventListener("wheel",p),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return G(),l(),{update(y){let w=!!i;o=y.drag??o,r=y.wheel??r,s=Ne(y.invert),i=y.animate??i,!a&&d===null&&(e.style.cursor=o?"grab":"");let _=!!i;w&&!_?v():!w&&_&&l()},pause(){a||(a=!0,C(),v(),d=null,u=!1)},resume(){a&&(a=!1,G(),l())},destroy(){a||C(),v(),a=!0}}}function Ne(n){return n===void 0||n===!1?1:n===!0?-1:n}function vt(n,t={}){if(n.camera.kind!=="perspective")throw new Error("glyphcss: GlyphFirstPersonControls requires a perspective camera. Use <GlyphPerspectiveCamera> (not <GlyphOrthographicCamera> / <GlyphCamera>).");n.camera.eyeMode=!0;let e=n.host,o=t.drag??!0,r=t.keyboard??!0,s=t.moveSpeed??.05,i=t.lookSpeed??.004,a=Xe(t.invert),u=!1,c=null,h={x:0,y:0},d=new Set,f=null,m=n.camera;function g(l){if(!(!o||u)&&c===null){l.preventDefault(),c=l.pointerId,h={x:l.clientX,y:l.clientY};try{l.target.setPointerCapture(l.pointerId)}catch{}}}function L(l){if(c===null||l.pointerId!==c||!o||u)return;l.preventDefault();let v=l.clientX-h.x,G=l.clientY-h.y;h={x:l.clientX,y:l.clientY},m.rotY=m.rotY-v*i*a,m.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,m.rotX+G*i*a)),n.rerender()}function E(l){if(c===l.pointerId){c=null;try{l.target.releasePointerCapture(l.pointerId)}catch{}}}function S(l){r&&!u&&d.add(l.key.toLowerCase())}function A(l){d.delete(l.key.toLowerCase())}function M(){if(u||!r||d.size===0)return;let l=m.target,v=Math.cos(m.rotY),G=Math.sin(m.rotY),C=!1;(d.has("w")||d.has("arrowup"))&&(m.target=[l[0]-G*s,l[1]-v*s,l[2]],C=!0),(d.has("s")||d.has("arrowdown"))&&(m.target=[l[0]+G*s,l[1]+v*s,l[2]],C=!0),(d.has("a")||d.has("arrowleft"))&&(m.target=[l[0]-v*s,l[1]+G*s,l[2]],C=!0),(d.has("d")||d.has("arrowright"))&&(m.target=[l[0]+v*s,l[1]-G*s,l[2]],C=!0),C&&n.rerender()}function x(){u||(M(),f=requestAnimationFrame(x))}function p(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),r&&(e.ownerDocument?.addEventListener("keydown",S),e.ownerDocument?.addEventListener("keyup",A)),e.style.touchAction="none",e.style.userSelect="none",typeof requestAnimationFrame<"u"&&(f=requestAnimationFrame(x))}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.ownerDocument?.removeEventListener("keydown",S),e.ownerDocument?.removeEventListener("keyup",A),e.style.touchAction="",e.style.userSelect="",f!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(f),f=null),d.clear(),n.camera.eyeMode=!1}return p(),{update(l){o=l.drag??o,r=l.keyboard??r,s=l.moveSpeed??s,i=l.lookSpeed??i,a=Xe(l.invert)},pause(){u||(u=!0,b(),c=null)},resume(){u&&(u=!1,p())},destroy(){u||b(),u=!0}}}function Xe(n){return n===void 0||n===!1?1:n===!0?-1:n}function Et(n,t){let e=n.querySelector(`[data-glyph-mesh-id="${CSS.escape(t)}"]`);return e instanceof HTMLElement?e:null}function Ve(n,t,e){let o=n.getBoundingClientRect();return o.width<=0||o.height<=0?!1:t>=o.left&&t<=o.right&&e>=o.top&&e<=o.bottom}function Gt(n,t,e){let o=(n instanceof Document,n),r=Array.from(o.querySelectorAll(".glyph-mesh"));for(let s of r)if(Ve(s,t,e))return s;return null}var Mt=typeof HTMLElement<"u"?HTMLElement:class{},Ct=["mode","glyph-palette","use-colors","cols","rows","cell-aspect","directional-direction","directional-intensity","ambient-intensity","auto-size"];function Z(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function xt(n){if(n==="wireframe"||n==="solid"||n==="voxel")return n}function At(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}var Ce=class extends Mt{constructor(){super(...arguments);this._scene=null}static get observedAttributes(){return[...Ct]}getScene(){return this._scene}_readOptions(){let e={},o=xt(this.getAttribute("mode"));o!==void 0&&(e.mode=o);let r=this.getAttribute("glyph-palette");r&&(e.glyphPalette=r);let s=At(this.getAttribute("use-colors"));s!==void 0&&(e.useColors=s);let i=Z(this.getAttribute("cols"));i!==void 0&&(e.cols=i);let a=Z(this.getAttribute("rows"));a!==void 0&&(e.rows=a);let u=Z(this.getAttribute("cell-aspect"));u!==void 0&&(e.cellAspect=u);let c=Z(this.getAttribute("directional-intensity"));c!==void 0&&(e.directionalLight={direction:[.5,.7,.5],intensity:c});let h=Z(this.getAttribute("ambient-intensity"));return h!==void 0&&(e.ambientLight={intensity:h}),this.hasAttribute("auto-size")&&(e.autoSize=!0),e}_findCameraAncestor(){let e=this.parentElement;for(;e;){let o=e.tagName.toLowerCase();if(o==="glyph-perspective-camera"||o==="glyph-orthographic-camera")return e;e=e.parentElement}return null}_initScene(e){let o=typeof e.getCamera=="function"?e.getCamera():void 0,r=this._readOptions();o&&(r.camera=o),this._scene=Ee(this,r),this.dispatchEvent(new CustomEvent("glyphcss:scene-ready",{bubbles:!1}))}connectedCallback(){if(this._scene)return;let e=this._findCameraAncestor();if(!e)throw new Error("glyphcss: <glyph-scene> must be placed inside a <glyph-perspective-camera> or <glyph-orthographic-camera>.");if((typeof e.getCamera=="function"?e.getCamera():null)!==null)this._initScene(e);else{let r=()=>{e.removeEventListener("glyph:camera-ready",r),this._scene||this._initScene(e)};e.addEventListener("glyph:camera-ready",r)}}rerender(){this._scene?.rerender()}disconnectedCallback(){this._scene&&(this._scene.destroy(),this._scene=null)}attributeChangedCallback(e,o,r){o!==r&&this._scene&&this._scene.setOptions(this._readOptions())}};import{loadMesh as Lt,resolveGeometry as St,computeSceneBbox as wt}from"@glyphcss/core";var _t=typeof HTMLElement<"u"?HTMLElement:class{},Ht=["src","geometry","size","color","position","scale","rotation","normalize"];function Tt(n){let t=wt(n),e=(t.min[0]+t.max[0])/2,o=(t.min[1]+t.max[1])/2,r=(t.min[2]+t.max[2])/2,i=2/(Math.max(t.max[0]-t.min[0],t.max[1]-t.min[1],t.max[2]-t.min[2])||1);return n.map(a=>({...a,vertices:a.vertices.map(u=>[(u[0]-e)*i,(u[1]-o)*i,(u[2]-r)*i])}))}function xe(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function zt(n){if(n){if(!n.includes(",")){let t=parseFloat(n);return Number.isFinite(t)?t:void 0}return xe(n)}}function Pt(n){return n.closest("glyph-scene")??null}var Ae=class extends _t{constructor(){super(...arguments);this._handle=null;this._loadToken=0}static get observedAttributes(){return[...Ht]}getMeshHandle(){return this._handle}connectedCallback(){this._maybeLoad()}disconnectedCallback(){this._tearDown()}attributeChangedCallback(e,o,r){if(o!==r){if(e==="src"||e==="geometry"||e==="size"||e==="color"){this._tearDown(),this._maybeLoad();return}this._handle&&this._handle.setTransform(this._readTransform())}}_readTransform(){return{position:xe(this.getAttribute("position")),scale:zt(this.getAttribute("scale")),rotation:xe(this.getAttribute("rotation"))}}_tearDown(){if(this._loadToken+=1,this._handle){try{this._handle.dispose()}catch{}this._handle=null}}async _maybeLoad(){let e=this.getAttribute("src"),o=this.getAttribute("geometry"),r=Pt(this);if(r){if(!r.getScene()){let s=()=>{r.removeEventListener("glyphcss:scene-ready",s),this._maybeLoad()};r.addEventListener("glyphcss:scene-ready",s);return}if(e){let s=++this._loadToken,i;try{i=await Lt(e)}catch(h){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:h,bubbles:!0}));return}if(s!==this._loadToken){try{i.dispose()}catch{}return}let a=r.getScene();if(!a){try{i.dispose()}catch{}return}let c=this.hasAttribute("normalize")?Tt(i.polygons):i.polygons;this._handle=a.add(c,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:c},bubbles:!0}));return}if(o){let s=r.getScene();if(!s)return;let i=this.getAttribute("size"),a=i!==null?parseFloat(i):1,u=this.getAttribute("color")??void 0,c;try{c=St(o,{size:Number.isFinite(a)?a:1,color:u})}catch(h){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:h,bubbles:!0}));return}this._handle=s.add(c,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:c},bubbles:!0}))}}}};var Ot=typeof HTMLElement<"u"?HTMLElement:class{};function kt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function Rt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==2||t.some(e=>!Number.isFinite(e))))return[t[0],t[1]]}function It(n){return n.closest("glyph-scene")??null}var Le=class extends Ot{constructor(){super(...arguments);this._handle=null}static get observedAttributes(){return["at","size","hotspot-id"]}connectedCallback(){this._register()}disconnectedCallback(){this._handle&&this._unregister()}attributeChangedCallback(e,o,r){o!==r&&(this._handle&&this._unregister(),this._register())}_unregister(){if(!this._handle)return;let e=this._handle.el;for(;e.firstChild;)this.appendChild(e.firstChild);this._handle.remove(),this._handle=null}_register(){let e=kt(this.getAttribute("at"));if(!e)return;let o=It(this);if(!o)return;if(!o.getScene()){let u=()=>{o.removeEventListener("glyphcss:scene-ready",u),this._register()};o.addEventListener("glyphcss:scene-ready",u);return}let r=o.getScene();if(!r)return;let s=this.getAttribute("hotspot-id")??this.getAttribute("id")??String(Math.random()),i=Rt(this.getAttribute("size"));this._handle=r.addHotspot({id:s,at:e,size:i},()=>this.dispatchEvent(new CustomEvent("glyphcss:hotspot-click",{detail:{id:s},bubbles:!0})));let a=this._handle.el;for(;this.firstChild;)a.appendChild(this.firstChild)}};var Ft=typeof HTMLElement<"u"?HTMLElement:class{};function R(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var Se=class extends Ft{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","distance","zoom","stretch"]}getCamera(){return this._camera}connectedCallback(){this._camera=K({rotX:R(this.getAttribute("rot-x")),rotY:R(this.getAttribute("rot-y")),distance:R(this.getAttribute("distance")),zoom:R(this.getAttribute("zoom")),stretch:R(this.getAttribute("stretch"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let s=this._camera;if(!s)return;let i=R(this.getAttribute("rot-x")),a=R(this.getAttribute("rot-y")),u=R(this.getAttribute("distance")),c=R(this.getAttribute("zoom")),h=R(this.getAttribute("stretch")),d=!1;i!==void 0&&s.rotX!==i&&(s.rotX=i,d=!0),a!==void 0&&s.rotY!==a&&(s.rotY=a,d=!0),u!==void 0&&s.distance!==u&&(s.distance=u,d=!0),c!==void 0&&s.zoom!==c&&(s.zoom=c,d=!0),h!==void 0&&s.stretch!==h&&(s.stretch=h,d=!0),d&&this.querySelector("glyph-scene")?.rerender?.()}};var Yt=typeof HTMLElement<"u"?HTMLElement:class{};function W(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var we=class extends Yt{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","zoom"]}getCamera(){return this._camera}connectedCallback(){this._camera=ee({rotX:W(this.getAttribute("rot-x")),rotY:W(this.getAttribute("rot-y")),zoom:W(this.getAttribute("zoom"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let s=this._camera;if(!s)return;let i=W(this.getAttribute("rot-x")),a=W(this.getAttribute("rot-y")),u=W(this.getAttribute("zoom")),c=!1;i!==void 0&&s.rotX!==i&&(s.rotX=i,c=!0),a!==void 0&&s.rotY!==a&&(s.rotY=a,c=!0),u!==void 0&&s.zoom!==u&&(s.zoom=u,c=!0),c&&this.querySelector("glyph-scene")?.rerender?.()}};var Dt=typeof HTMLElement<"u"?HTMLElement:class{};function Nt(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function _e(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Xt(n){return n.closest("glyph-scene")??null}var He=class extends Dt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert","animate-speed","animate-axis"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=_e(this.getAttribute("drag")),o=_e(this.getAttribute("wheel")),r=_e(this.getAttribute("invert")),s=Nt(this.getAttribute("animate-speed")),i=this.getAttribute("animate-axis")==="x"?"x":"y";return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{},...s!==void 0?{animate:{speed:s,axis:i}}:{}}}_attach(){if(this._controls)return;let e=Xt(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Ge(o,this._readOptions())}};var Vt=typeof HTMLElement<"u"?HTMLElement:class{};function Te(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Bt(n){return n.closest("glyph-scene")??null}var ze=class extends Vt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Te(this.getAttribute("drag")),o=Te(this.getAttribute("wheel")),r=Te(this.getAttribute("invert"));return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{}}}_attach(){if(this._controls)return;let e=Bt(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Me(o,this._readOptions())}};export*from"@glyphcss/core";export{it as DEFAULT_RAMP,Le as GlyphHotspotElement,ze as GlyphMapControlsElement,Ae as GlyphMeshElement,He as GlyphOrbitControlsElement,we as GlyphOrthographicCameraElement,Se as GlyphPerspectiveCameraElement,Ce as GlyphSceneElement,st as SOLID_RAMP,lt as WIREFRAME_GLYPHS,te as WIREFRAME_PALETTES,ht as bakeFrames,fe as buildRasterizeContext,tt as createGlyphCamera,vt as createGlyphFirstPersonControls,Me as createGlyphMapControls,Ge as createGlyphOrbitControls,ee as createGlyphOrthographicCamera,K as createGlyphPerspectiveCamera,Ee as createGlyphScene,Et as findGlyphMeshHandle,Gt as findMeshUnderPoint,ne as getWireframeGlyphs,be as injectGlyphBaseStyles,Ve as pointInMeshElement,ve as projectHotspots,re as rasterize};
|
|
62
|
+
`;function ve(n,t,e,o,r){return n.map(s=>{let[i,a,u]=t.project(s.at,e,o,r),c=u>-3&&i>=0&&i<e&&a>=0&&a<o;return{id:s.id,col:i,row:a,depth:u,visible:c}})}var gt=1;function bt(n,t){let{position:e,scale:o,rotation:r}=t;if(!e&&!o&&!r)return n;let[s,i,a]=e??[0,0,0],u=1,c=1,h=1;o!==void 0&&(typeof o=="number"?u=c=h=o:[u,c,h]=o);let[d,f,m]=r??[0,0,0],g=Math.cos(d),L=Math.sin(d),E=Math.cos(f),S=Math.sin(f),A=Math.cos(m),M=Math.sin(m);function x(p){let b=p[0]*u,l=p[1]*c,v=p[2]*h,G=A*b-M*l,C=M*b+A*l,y=v;return b=E*G+S*y,l=C,v=-S*G+E*y,G=b,C=g*l-L*v,y=L*l+g*v,[G+s,C+i,y+a]}return n.map(p=>({...p,vertices:p.vertices.map(x)}))}function Ee(n,t={}){be(n.ownerDocument??void 0);let e={mode:t.mode??"solid",glyphPalette:t.glyphPalette??"default",useColors:t.useColors??!0,cols:t.cols??80,rows:t.rows??24,cellAspect:t.cellAspect??2,directionalLight:t.directionalLight??{direction:[.5,.7,.5],intensity:1},ambientLight:t.ambientLight??{intensity:.4},camera:t.camera??K(),smoothShading:t.smoothShading??!1,creaseAngle:t.creaseAngle??60,autoSize:t.autoSize??!1},o=n.ownerDocument.createElement("div");o.className="glyph-scene";let r=n.ownerDocument.createElement("pre");r.className="glyph-output";let s=n.ownerDocument.createElement("div");s.className="glyph-hotspot-layer",o.appendChild(r),o.appendChild(s),n.appendChild(o);let i=new Map,a=[],u=!1;function c(){u||(u=!0,Promise.resolve().then(()=>{u=!1,h()}))}function h(){let p=[];for(let v of i.values()){let G=bt(v.polygons,v.transform);for(let C of G)p.push(C)}let b=fe({camera:e.camera,grid:{cols:e.cols,rows:e.rows,cellAspect:e.cellAspect},polygons:p,mode:e.mode,directionalLight:e.directionalLight,ambientLight:e.ambientLight,glyphPalette:e.glyphPalette,useColors:e.useColors,smoothShading:e.smoothShading,creaseAngle:e.creaseAngle}),l=re(b);e.useColors?r.innerHTML=l:r.textContent=l,d()}function d(){let{cols:p,rows:b,cellAspect:l,camera:v}=e,G=ve(a.map(_=>_.hotspot),v,p,b,l),C=r.getBoundingClientRect(),y=p>0?C.width/p:8,w=b>0?C.height/b:16;for(let _=0;_<a.length;_++){let{el:T}=a[_],H=G[_];H.visible?(T.style.display="",T.style.left=`${(H.col+.5)*y}px`,T.style.top=`${(H.row+.5)*w}px`,T.style.zIndex=String(Math.round(H.depth*1e3))):T.style.display="none"}}function f(p,b={}){let l=gt++;return i.set(l,{id:l,polygons:p,transform:b}),c(),{get id(){return l},get name(){return i.get(l)?.transform.id},get polygons(){return p},setTransform(v){let G=i.get(l);G&&(G.transform=v,c())},dispose(){i.delete(l),c()}}}function m(p,b){let l=n.ownerDocument.createElement("div");l.className="glyph-hotspot",l.setAttribute("data-hotspot-id",p.id);let[v,G]=p.size??[1,1];l.style.position="absolute",l.style.width=`${v}ch`,l.style.height=`${G*e.cellAspect}ch`,b&&l.addEventListener("click",b),s.appendChild(l);let C={hotspot:{id:p.id,at:p.at,size:p.size},el:l,onClick:b};return a.push(C),c(),{get el(){return l},remove(){let y=a.indexOf(C);y>=0&&a.splice(y,1),b&&l.removeEventListener("click",b),s.removeChild(l),c()}}}function g(){h()}function L(p){p.mode!==void 0&&(e.mode=p.mode),p.glyphPalette!==void 0&&(e.glyphPalette=p.glyphPalette),p.useColors!==void 0&&(e.useColors=p.useColors),p.cols!==void 0&&(e.cols=p.cols),p.rows!==void 0&&(e.rows=p.rows),p.cellAspect!==void 0&&(e.cellAspect=p.cellAspect),p.directionalLight!==void 0&&(e.directionalLight=p.directionalLight),p.ambientLight!==void 0&&(e.ambientLight=p.ambientLight),p.camera!==void 0&&(e.camera=p.camera),p.smoothShading!==void 0&&(e.smoothShading=p.smoothShading),p.creaseAngle!==void 0&&(e.creaseAngle=p.creaseAngle),p.autoSize!==void 0&&(e.autoSize=p.autoSize,e.autoSize&&!M&&typeof ResizeObserver<"u"?(M=new ResizeObserver(()=>A()),M.observe(n),A()):!e.autoSize&&M&&(M.disconnect(),M=null)),c()}function E(){return{...e}}function S(){let p=n.ownerDocument.createElement("span");p.textContent="M",p.style.cssText="position:absolute;visibility:hidden;font-family:inherit;font-size:inherit;line-height:inherit;white-space:pre;padding:0;margin:0",r.appendChild(p);let b=p.getBoundingClientRect();return p.remove(),{w:b.width||8,h:b.height||16}}function A(){let p=n.clientWidth,b=n.clientHeight;if(!p||!b)return;let l=S(),v=Math.max(20,Math.floor(p/l.w)),G=Math.max(8,Math.floor(b/l.h)),C=l.h/l.w,y=!1;e.cols!==v&&(e.cols=v,y=!0),e.rows!==G&&(e.rows=G,y=!0),Math.abs(e.cellAspect-C)>.01&&(e.cellAspect=C,y=!0),y&&c()}let M=null;e.autoSize&&typeof ResizeObserver<"u"&&(M=new ResizeObserver(()=>A()),M.observe(n),A());function x(){M&&(M.disconnect(),M=null),i.clear(),n.contains(o)&&n.removeChild(o)}return c(),{get host(){return n},get output(){return r},get camera(){return e.camera},add:f,addHotspot:m,rerender:g,setOptions:L,getOptions:E,fit:A,destroy:x}}function Ge(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,s=De(t.invert),i=t.animate??!1,a=!1,u=!1,c=null,h=null,d=null,f={x:0,y:0},m=n.camera;function g(l){if(!(!o||a)&&d===null&&l.isPrimary!==!1){l.preventDefault(),d=l.pointerId,f={x:l.clientX,y:l.clientY},e.style.cursor="grabbing";try{l.target.setPointerCapture(l.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(u=!0)}}function L(l){if(d===null||l.pointerId!==d||!o||a)return;l.preventDefault();let v=l.clientX-f.x,G=l.clientY-f.y;f={x:l.clientX,y:l.clientY};let C=s,w=1/4*Math.PI/180;m.rotY=m.rotY-v*w*C,m.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,m.rotX-G*w*C)),n.rerender()}function E(l){if(d===l.pointerId){d=null,e.style.cursor=o&&!a?"grab":"";try{l.target.releasePointerCapture(l.pointerId)}catch{}i&&(u=!1)}}function S(l){if(!r||a)return;l.preventDefault();let v=l.deltaY*.001;m.zoom=Math.max(.05,Math.min(10,m.zoom*(1-v))),n.rerender()}function A(l){if(!(a||!i)){if(!u){let v=h!==null?Math.min(l-h,50):16.67,G=typeof i=="object"&&i.speed?i.speed:.3,C=typeof i=="object"&&i.axis?i.axis:"y",y=G*(Math.PI/180)*(v/16.67);C==="y"?m.rotY=m.rotY+y:m.rotX=m.rotX+y,n.rerender()}h=l,c=requestAnimationFrame(A)}}function M(){c===null&&typeof requestAnimationFrame<"u"&&i&&(c=requestAnimationFrame(A))}function x(){c!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(c),c=null),h=null}function p(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),e.addEventListener("wheel",S,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.removeEventListener("wheel",S),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return p(),M(),{update(l){let v=!!i;o=l.drag??o,r=l.wheel??r,s=De(l.invert),i=l.animate??i,!a&&d===null&&(e.style.cursor=o?"grab":"");let G=!!i;v&&!G?x():!v&&G&&M()},pause(){a||(a=!0,b(),x(),d=null,u=!1)},resume(){a&&(a=!1,p(),M())},destroy(){a||b(),x(),a=!0}}}function De(n){return n===void 0||n===!1?1:n===!0?-1:n}function Me(n,t={}){let e=n.host,o=t.drag??!0,r=t.wheel??!0,s=Ne(t.invert),i=t.animate??!1,a=!1,u=!1,c=null,h=null,d=null,f={x:0,y:0},m=!1,g=n.camera,L=1/4*Math.PI/180,E=.02;function S(y){if(!(!o||a)&&d===null&&y.isPrimary!==!1){y.preventDefault(),d=y.pointerId,f={x:y.clientX,y:y.clientY},m=y.button===2,e.style.cursor="grabbing";try{y.target.setPointerCapture(y.pointerId)}catch{}i&&i.pauseOnInteraction!==!1&&(u=!0)}}function A(y){if(d===null||y.pointerId!==d||!o||a)return;y.preventDefault();let w=y.clientX-f.x,_=y.clientY-f.y;f={x:y.clientX,y:y.clientY};let T=s;if(m||y.shiftKey)g.rotY=g.rotY-w*L*T,g.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,g.rotX+_*L*T));else{let H=g.target;g.target=[H[0]-w*E/g.zoom,H[1]-_*E/g.zoom,H[2]]}n.rerender()}function M(y){if(d===y.pointerId){d=null,m=!1,e.style.cursor=o&&!a?"grab":"";try{y.target.releasePointerCapture(y.pointerId)}catch{}i&&(u=!1)}}function x(y){y.preventDefault()}function p(y){if(!r||a)return;y.preventDefault();let w=y.deltaY*.001;g.zoom=Math.max(.05,Math.min(10,g.zoom*(1-w))),n.rerender()}function b(y){if(!(a||!i)){if(!u){let w=h!==null?Math.min(y-h,50):16.67,_=typeof i=="object"&&i.speed?i.speed:.3,T=typeof i=="object"&&i.axis?i.axis:"y",H=_*(Math.PI/180)*(w/16.67);T==="y"?g.rotY=g.rotY+H:g.rotX=g.rotX+H,n.rerender()}h=y,c=requestAnimationFrame(b)}}function l(){c===null&&typeof requestAnimationFrame<"u"&&i&&(c=requestAnimationFrame(b))}function v(){c!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(c),c=null),h=null}function G(){e.addEventListener("pointerdown",S),e.addEventListener("pointermove",A),e.addEventListener("pointerup",M),e.addEventListener("pointercancel",M),e.addEventListener("contextmenu",x),e.addEventListener("wheel",p,{passive:!1}),e.style.cursor=o?"grab":"",e.style.touchAction="none",e.style.userSelect="none"}function C(){e.removeEventListener("pointerdown",S),e.removeEventListener("pointermove",A),e.removeEventListener("pointerup",M),e.removeEventListener("pointercancel",M),e.removeEventListener("contextmenu",x),e.removeEventListener("wheel",p),e.style.cursor="",e.style.touchAction="",e.style.userSelect=""}return G(),l(),{update(y){let w=!!i;o=y.drag??o,r=y.wheel??r,s=Ne(y.invert),i=y.animate??i,!a&&d===null&&(e.style.cursor=o?"grab":"");let _=!!i;w&&!_?v():!w&&_&&l()},pause(){a||(a=!0,C(),v(),d=null,u=!1)},resume(){a&&(a=!1,G(),l())},destroy(){a||C(),v(),a=!0}}}function Ne(n){return n===void 0||n===!1?1:n===!0?-1:n}function vt(n,t={}){if(n.camera.kind!=="perspective")throw new Error("glyphcss: GlyphFirstPersonControls requires a perspective camera. Use <GlyphPerspectiveCamera> (not <GlyphOrthographicCamera> / <GlyphCamera>).");n.camera.eyeMode=!0;let e=n.host,o=t.drag??!0,r=t.keyboard??!0,s=t.moveSpeed??.05,i=t.lookSpeed??.004,a=Xe(t.invert),u=!1,c=null,h={x:0,y:0},d=new Set,f=null,m=n.camera;function g(l){if(!(!o||u)&&c===null){l.preventDefault(),c=l.pointerId,h={x:l.clientX,y:l.clientY};try{l.target.setPointerCapture(l.pointerId)}catch{}}}function L(l){if(c===null||l.pointerId!==c||!o||u)return;l.preventDefault();let v=l.clientX-h.x,G=l.clientY-h.y;h={x:l.clientX,y:l.clientY},m.rotY=m.rotY-v*i*a,m.rotX=Math.max(-Math.PI/2,Math.min(Math.PI/2,m.rotX+G*i*a)),n.rerender()}function E(l){if(c===l.pointerId){c=null;try{l.target.releasePointerCapture(l.pointerId)}catch{}}}function S(l){r&&!u&&d.add(l.key.toLowerCase())}function A(l){d.delete(l.key.toLowerCase())}function M(){if(u||!r||d.size===0)return;let l=m.target,v=Math.cos(m.rotY),G=Math.sin(m.rotY),C=!1;(d.has("w")||d.has("arrowup"))&&(m.target=[l[0]-G*s,l[1]-v*s,l[2]],C=!0),(d.has("s")||d.has("arrowdown"))&&(m.target=[l[0]+G*s,l[1]+v*s,l[2]],C=!0),(d.has("a")||d.has("arrowleft"))&&(m.target=[l[0]-v*s,l[1]+G*s,l[2]],C=!0),(d.has("d")||d.has("arrowright"))&&(m.target=[l[0]+v*s,l[1]-G*s,l[2]],C=!0),C&&n.rerender()}function x(){u||(M(),f=requestAnimationFrame(x))}function p(){e.addEventListener("pointerdown",g),e.addEventListener("pointermove",L),e.addEventListener("pointerup",E),e.addEventListener("pointercancel",E),r&&(e.ownerDocument?.addEventListener("keydown",S),e.ownerDocument?.addEventListener("keyup",A)),e.style.touchAction="none",e.style.userSelect="none",typeof requestAnimationFrame<"u"&&(f=requestAnimationFrame(x))}function b(){e.removeEventListener("pointerdown",g),e.removeEventListener("pointermove",L),e.removeEventListener("pointerup",E),e.removeEventListener("pointercancel",E),e.ownerDocument?.removeEventListener("keydown",S),e.ownerDocument?.removeEventListener("keyup",A),e.style.touchAction="",e.style.userSelect="",f!==null&&(typeof cancelAnimationFrame<"u"&&cancelAnimationFrame(f),f=null),d.clear(),n.camera.eyeMode=!1}return p(),{update(l){o=l.drag??o,r=l.keyboard??r,s=l.moveSpeed??s,i=l.lookSpeed??i,a=Xe(l.invert)},pause(){u||(u=!0,b(),c=null)},resume(){u&&(u=!1,p())},destroy(){u||b(),u=!0}}}function Xe(n){return n===void 0||n===!1?1:n===!0?-1:n}function Et(n,t){let e=n.querySelector(`[data-glyph-mesh-id="${CSS.escape(t)}"]`);return e instanceof HTMLElement?e:null}function Ve(n,t,e){let o=n.getBoundingClientRect();return o.width<=0||o.height<=0?!1:t>=o.left&&t<=o.right&&e>=o.top&&e<=o.bottom}function Gt(n,t,e){let o=(n instanceof Document,n),r=Array.from(o.querySelectorAll(".glyph-mesh"));for(let s of r)if(Ve(s,t,e))return s;return null}var Mt=typeof HTMLElement<"u"?HTMLElement:class{},Ct=["mode","glyph-palette","use-colors","cols","rows","cell-aspect","directional-direction","directional-intensity","ambient-intensity","auto-size"];function Z(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function xt(n){if(n==="wireframe"||n==="solid"||n==="voxel")return n}function At(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}var Ce=class extends Mt{constructor(){super(...arguments);this._scene=null}static get observedAttributes(){return[...Ct]}getScene(){return this._scene}_readOptions(){let e={},o=xt(this.getAttribute("mode"));o!==void 0&&(e.mode=o);let r=this.getAttribute("glyph-palette");r&&(e.glyphPalette=r);let s=At(this.getAttribute("use-colors"));s!==void 0&&(e.useColors=s);let i=Z(this.getAttribute("cols"));i!==void 0&&(e.cols=i);let a=Z(this.getAttribute("rows"));a!==void 0&&(e.rows=a);let u=Z(this.getAttribute("cell-aspect"));u!==void 0&&(e.cellAspect=u);let c=Z(this.getAttribute("directional-intensity"));c!==void 0&&(e.directionalLight={direction:[.5,.7,.5],intensity:c});let h=Z(this.getAttribute("ambient-intensity"));return h!==void 0&&(e.ambientLight={intensity:h}),this.hasAttribute("auto-size")&&(e.autoSize=!0),e}_findCameraAncestor(){let e=this.parentElement;for(;e;){let o=e.tagName.toLowerCase();if(o==="glyph-perspective-camera"||o==="glyph-orthographic-camera"||o==="glyph-camera")return e;e=e.parentElement}return null}_initScene(e){let o=typeof e.getCamera=="function"?e.getCamera():void 0,r=this._readOptions();o&&(r.camera=o),this._scene=Ee(this,r),this.dispatchEvent(new CustomEvent("glyphcss:scene-ready",{bubbles:!1}))}connectedCallback(){if(this._scene)return;let e=this._findCameraAncestor();if(!e)throw new Error("glyphcss: <glyph-scene> must be placed inside a <glyph-camera>, <glyph-perspective-camera>, or <glyph-orthographic-camera>.");if((typeof e.getCamera=="function"?e.getCamera():null)!==null)this._initScene(e);else{let r=()=>{e.removeEventListener("glyph:camera-ready",r),this._scene||this._initScene(e)};e.addEventListener("glyph:camera-ready",r)}}rerender(){this._scene?.rerender()}disconnectedCallback(){this._scene&&(this._scene.destroy(),this._scene=null)}attributeChangedCallback(e,o,r){o!==r&&this._scene&&this._scene.setOptions(this._readOptions())}};import{loadMesh as Lt,resolveGeometry as St,computeSceneBbox as wt}from"@glyphcss/core";var _t=typeof HTMLElement<"u"?HTMLElement:class{},Ht=["src","geometry","size","color","position","scale","rotation","normalize"];function Tt(n){let t=wt(n),e=(t.min[0]+t.max[0])/2,o=(t.min[1]+t.max[1])/2,r=(t.min[2]+t.max[2])/2,i=2/(Math.max(t.max[0]-t.min[0],t.max[1]-t.min[1],t.max[2]-t.min[2])||1);return n.map(a=>({...a,vertices:a.vertices.map(u=>[(u[0]-e)*i,(u[1]-o)*i,(u[2]-r)*i])}))}function xe(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function zt(n){if(n){if(!n.includes(",")){let t=parseFloat(n);return Number.isFinite(t)?t:void 0}return xe(n)}}function Pt(n){return n.closest("glyph-scene")??null}var Ae=class extends _t{constructor(){super(...arguments);this._handle=null;this._loadToken=0}static get observedAttributes(){return[...Ht]}getMeshHandle(){return this._handle}connectedCallback(){this._maybeLoad()}disconnectedCallback(){this._tearDown()}attributeChangedCallback(e,o,r){if(o!==r){if(e==="src"||e==="geometry"||e==="size"||e==="color"){this._tearDown(),this._maybeLoad();return}this._handle&&this._handle.setTransform(this._readTransform())}}_readTransform(){return{position:xe(this.getAttribute("position")),scale:zt(this.getAttribute("scale")),rotation:xe(this.getAttribute("rotation"))}}_tearDown(){if(this._loadToken+=1,this._handle){try{this._handle.dispose()}catch{}this._handle=null}}async _maybeLoad(){let e=this.getAttribute("src"),o=this.getAttribute("geometry"),r=Pt(this);if(r){if(!r.getScene()){let s=()=>{r.removeEventListener("glyphcss:scene-ready",s),this._maybeLoad()};r.addEventListener("glyphcss:scene-ready",s);return}if(e){let s=++this._loadToken,i;try{i=await Lt(e)}catch(h){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:h,bubbles:!0}));return}if(s!==this._loadToken){try{i.dispose()}catch{}return}let a=r.getScene();if(!a){try{i.dispose()}catch{}return}let c=this.hasAttribute("normalize")?Tt(i.polygons):i.polygons;this._handle=a.add(c,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:c},bubbles:!0}));return}if(o){let s=r.getScene();if(!s)return;let i=this.getAttribute("size"),a=i!==null?parseFloat(i):1,u=this.getAttribute("color")??void 0,c;try{c=St(o,{size:Number.isFinite(a)?a:1,color:u})}catch(h){this.dispatchEvent(new CustomEvent("glyphcss:error",{detail:h,bubbles:!0}));return}this._handle=s.add(c,this._readTransform()),this.dispatchEvent(new CustomEvent("glyphcss:loaded",{detail:{polygons:c},bubbles:!0}))}}}};var Ot=typeof HTMLElement<"u"?HTMLElement:class{};function kt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==3||t.some(e=>!Number.isFinite(e))))return[t[0],t[1],t[2]]}function Rt(n){if(!n)return;let t=n.split(",").map(e=>parseFloat(e.trim()));if(!(t.length!==2||t.some(e=>!Number.isFinite(e))))return[t[0],t[1]]}function It(n){return n.closest("glyph-scene")??null}var Le=class extends Ot{constructor(){super(...arguments);this._handle=null}static get observedAttributes(){return["at","size","hotspot-id"]}connectedCallback(){this._register()}disconnectedCallback(){this._handle&&this._unregister()}attributeChangedCallback(e,o,r){o!==r&&(this._handle&&this._unregister(),this._register())}_unregister(){if(!this._handle)return;let e=this._handle.el;for(;e.firstChild;)this.appendChild(e.firstChild);this._handle.remove(),this._handle=null}_register(){let e=kt(this.getAttribute("at"));if(!e)return;let o=It(this);if(!o)return;if(!o.getScene()){let u=()=>{o.removeEventListener("glyphcss:scene-ready",u),this._register()};o.addEventListener("glyphcss:scene-ready",u);return}let r=o.getScene();if(!r)return;let s=this.getAttribute("hotspot-id")??this.getAttribute("id")??String(Math.random()),i=Rt(this.getAttribute("size"));this._handle=r.addHotspot({id:s,at:e,size:i},()=>this.dispatchEvent(new CustomEvent("glyphcss:hotspot-click",{detail:{id:s},bubbles:!0})));let a=this._handle.el;for(;this.firstChild;)a.appendChild(this.firstChild)}};var Ft=typeof HTMLElement<"u"?HTMLElement:class{};function R(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var Se=class extends Ft{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","distance","zoom","stretch"]}getCamera(){return this._camera}connectedCallback(){this._camera=K({rotX:R(this.getAttribute("rot-x")),rotY:R(this.getAttribute("rot-y")),distance:R(this.getAttribute("distance")),zoom:R(this.getAttribute("zoom")),stretch:R(this.getAttribute("stretch"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let s=this._camera;if(!s)return;let i=R(this.getAttribute("rot-x")),a=R(this.getAttribute("rot-y")),u=R(this.getAttribute("distance")),c=R(this.getAttribute("zoom")),h=R(this.getAttribute("stretch")),d=!1;i!==void 0&&s.rotX!==i&&(s.rotX=i,d=!0),a!==void 0&&s.rotY!==a&&(s.rotY=a,d=!0),u!==void 0&&s.distance!==u&&(s.distance=u,d=!0),c!==void 0&&s.zoom!==c&&(s.zoom=c,d=!0),h!==void 0&&s.stretch!==h&&(s.stretch=h,d=!0),d&&this.querySelector("glyph-scene")?.rerender?.()}};var Yt=typeof HTMLElement<"u"?HTMLElement:class{};function W(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}var we=class extends Yt{constructor(){super(...arguments);this._camera=null}static get observedAttributes(){return["rot-x","rot-y","zoom"]}getCamera(){return this._camera}connectedCallback(){this._camera=ee({rotX:W(this.getAttribute("rot-x")),rotY:W(this.getAttribute("rot-y")),zoom:W(this.getAttribute("zoom"))}),this.dispatchEvent(new CustomEvent("glyph:camera-ready",{bubbles:!1}))}disconnectedCallback(){this._camera=null}attributeChangedCallback(e,o,r){if(o===r)return;let s=this._camera;if(!s)return;let i=W(this.getAttribute("rot-x")),a=W(this.getAttribute("rot-y")),u=W(this.getAttribute("zoom")),c=!1;i!==void 0&&s.rotX!==i&&(s.rotX=i,c=!0),a!==void 0&&s.rotY!==a&&(s.rotY=a,c=!0),u!==void 0&&s.zoom!==u&&(s.zoom=u,c=!0),c&&this.querySelector("glyph-scene")?.rerender?.()}};var Dt=typeof HTMLElement<"u"?HTMLElement:class{};function Nt(n){if(n==null)return;let t=parseFloat(n);return Number.isFinite(t)?t:void 0}function _e(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Xt(n){return n.closest("glyph-scene")??null}var He=class extends Dt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert","animate-speed","animate-axis"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=_e(this.getAttribute("drag")),o=_e(this.getAttribute("wheel")),r=_e(this.getAttribute("invert")),s=Nt(this.getAttribute("animate-speed")),i=this.getAttribute("animate-axis")==="x"?"x":"y";return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{},...s!==void 0?{animate:{speed:s,axis:i}}:{}}}_attach(){if(this._controls)return;let e=Xt(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Ge(o,this._readOptions())}};var Vt=typeof HTMLElement<"u"?HTMLElement:class{};function Te(n){if(n!==null){if(n==="false")return!1;if(n==="true"||n==="")return!0}}function Bt(n){return n.closest("glyph-scene")??null}var ze=class extends Vt{constructor(){super(...arguments);this._controls=null}static get observedAttributes(){return["drag","wheel","invert"]}connectedCallback(){this._attach()}disconnectedCallback(){this._controls&&(this._controls.destroy(),this._controls=null)}attributeChangedCallback(e,o,r){o!==r&&this._controls?.update(this._readOptions())}_readOptions(){let e=Te(this.getAttribute("drag")),o=Te(this.getAttribute("wheel")),r=Te(this.getAttribute("invert"));return{...e!==void 0?{drag:e}:{},...o!==void 0?{wheel:o}:{},...r!==void 0?{invert:r}:{}}}_attach(){if(this._controls)return;let e=Bt(this);if(!e)return;let o=e.getScene();if(!o){let r=()=>{e.removeEventListener("glyphcss:scene-ready",r),this._attach()};e.addEventListener("glyphcss:scene-ready",r);return}this._controls=Me(o,this._readOptions())}};export*from"@glyphcss/core";export{it as DEFAULT_RAMP,Le as GlyphHotspotElement,ze as GlyphMapControlsElement,Ae as GlyphMeshElement,He as GlyphOrbitControlsElement,we as GlyphOrthographicCameraElement,Se as GlyphPerspectiveCameraElement,Ce as GlyphSceneElement,st as SOLID_RAMP,lt as WIREFRAME_GLYPHS,te as WIREFRAME_PALETTES,ht as bakeFrames,fe as buildRasterizeContext,tt as createGlyphCamera,vt as createGlyphFirstPersonControls,Me as createGlyphMapControls,Ge as createGlyphOrbitControls,ee as createGlyphOrthographicCamera,K as createGlyphPerspectiveCamera,Ee as createGlyphScene,Et as findGlyphMeshHandle,Gt as findMeshUnderPoint,ne as getWireframeGlyphs,be as injectGlyphBaseStyles,Ve as pointInMeshElement,ve as projectHotspots,re as rasterize};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "glyphcss",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.3",
|
|
4
4
|
"description": "Glyphcss — ASCII paint backend with glyphcss's scene-composition API. Renders 3D meshes as ASCII art in a <pre> element.",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"main": "dist/index.cjs",
|
|
@@ -33,7 +33,7 @@
|
|
|
33
33
|
}
|
|
34
34
|
},
|
|
35
35
|
"dependencies": {
|
|
36
|
-
"@glyphcss/core": "^0.0.
|
|
36
|
+
"@glyphcss/core": "^0.0.3"
|
|
37
37
|
},
|
|
38
38
|
"devDependencies": {
|
|
39
39
|
"tsup": "^8.0.1",
|