-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathxylayout-all.min.js
1 lines (1 loc) · 37.2 KB
/
xylayout-all.min.js
1
AFRAME.registerComponent("css-borderline",{schema:{height:{default:1,min:0},width:{default:1,min:0},color:{default:""},style:{default:"solid"},linewidth:{default:1,min:0},radiusBL:{default:0,min:0},radiusBR:{default:0,min:0},radiusTL:{default:0,min:0},radiusTR:{default:0,min:0}},update(){let t=this.data,e=new THREE.Path,i=(t.width||.01)/2,s=(t.height||.01)/2,l=t.radiusTL,h=t.radiusTR,a=t.radiusBL,o=t.radiusBR,r=Math.PI/2;e.moveTo(-i,-s+a),e.lineTo(-i,s-l),l&&e.arc(l,0,l,2*r,1*r,!0),e.lineTo(i-h,s),h&&e.arc(0,-h,h,1*r,0*r,!0),e.lineTo(i,-s+o),o&&e.arc(-o,0,o,0*r,3*r,!0),e.lineTo(-i+a,-s),a&&e.arc(0,a,a,3*r,2*r,!0);let n=(new THREE.BufferGeometry).setFromPoints(e.getPoints()),d=t.linewidth,u=t.color,c=t.style,y=2.54*d/96/100,x="solid"==c?new THREE.LineBasicMaterial({linewidth:d,color:u}):new THREE.LineDashedMaterial({linewidth:d,color:u,gapSize:y,dashSize:"dashed"==c?3*y:y}),f=new THREE.Line(n,x);"solid"!=c&&f.computeLineDistances(),f.position.set(0,0,.001),f.raycast=(()=>{}),this.el.setObject3D("css-borderline",f),this.t(f)},remove(){this.el.removeObject3D("css-borderline"),this.t(null)},s:null,t(t){this.s&&(this.s.material.dispose(),this.s.geometry.dispose()),this.s=t}}),AFRAME.registerComponent("style",{dependencies:["xyrect"],schema:{default:""},l:null,h:!1,p:!1,init(){let t=this.el,e=getComputedStyle(t);if("none"!=e.pointerEvents){let i=this.g(e.getPropertyValue("--collider-class"))||"collidable",s=this.g(e.getPropertyValue("--hover-alt-class"))||"_hover";t.classList.add(i),t.addEventListener("mouseenter",e=>t.classList.add(s)),t.addEventListener("mouseleave",e=>t.classList.remove(s))}let i=t=>{this.p=!0,this.play()},s=t=>this.p=!1;t.addEventListener("transitionstart",i),t.addEventListener("transitionend",s),t.addEventListener("animationstart",i),t.addEventListener("animationend",s),this.l=new MutationObserver((t,e)=>{t.some(t=>["class","style","value"].includes(t.attributeName))&&this.m()}),this.l.observe(t,{attributes:!0}),this.m()},tick(){this.p?this.m():this.pause()},remove(){this.l.disconnect()},m(){let t=this.el,e=getComputedStyle(t);this.v(t,e),t.setAttribute("visible","hidden"!=e.visibility),t.childElementCount>0?this.R(t,e):(t.removeAttribute("xycontainer"),t.components.xyinput?t.setAttribute("xyinput",{caretColor:e.caretColor,color:e.color}):this.k(t,e)),this.T(t,e)},k(t,e){let i=this.g(e.content);if(i||(i=t.textContent.trim()),i||t.hasAttribute("xylabel")){let s=e.textAlign;"start"==s&&(s="left"),"end"==s&&(s="right");let l={value:i,align:s};this.A(e.color)[3]>0&&(l.color=e.color),t.setAttribute("xylabel",l)}},v(t,e){let i=this.M(e.width,t.parentElement),s=this.M(e.height,t.parentElement,!0);(i>0||s>0)&&t.setAttribute("xyrect",{width:i+2*this.M(e.paddingInline),height:s+2*this.M(e.paddingBlock)});let l="fixed"==e.position,h=parseInt(e.flexGrow),a=parseInt(e.flexShrink);(l||h||a)&&t.setAttribute("xyitem",{fixed:l,grow:h,shrink:a});let o=t.getAttribute("geometry");if(o&&"xy-rounded-rect"!=o.primitive)return void t.setAttribute("material",{color:e.color,opacity:this.A(e.color)[3]});let r=this.A(e.backgroundColor),n=this.H(e.borderWidth);(r[3]>0||"none"!=e.pointerEvents)&&(t.setAttribute("geometry",{primitive:"xy-rounded-rect",width:i,height:s,radiusBL:this.M(e.borderBottomLeftRadius),radiusBR:this.M(e.borderBottomRightRadius),radiusTL:this.M(e.borderTopLeftRadius),radiusTR:this.M(e.borderTopRightRadius)}),t.setAttribute("material",{color:e.backgroundColor,opacity:r[3],src:this.C(e.backgroundImage)||""})),n>0?t.setAttribute("css-borderline",{width:i,height:s,linewidth:n,color:e.borderColor,style:e.borderStyle,radiusBL:this.M(e.borderBottomLeftRadius),radiusBR:this.M(e.borderBottomRightRadius),radiusTL:this.M(e.borderTopLeftRadius),radiusTR:this.M(e.borderTopRightRadius)}):t.removeAttribute("css-borderline")},R(t,e){"fixed"==e.position&&t.setAttribute("xyitem",{fixed:!0}),t.setAttribute("xycontainer",{wrap:e.flexWrap,direction:e.flexDirection,spacing:this.M(e.columnGap),alignContent:e.alignContent,justifyItems:["space-between","space-around"].includes(e.justifyContent)?e.justifyContent:e.justifyItems,alignItems:e.alignItems})},T(t,e){if(this.h=this.h||"none"!=e.transform,this.h){let i=new DOMMatrix(e.transform),s=new THREE.Vector3,l=new THREE.Quaternion,h=new THREE.Vector3;(new THREE.Matrix4).set(i.m11,i.m21,i.m31,i.m41,i.m12,i.m22,i.m32,i.m42,i.m13,i.m23,i.m33,i.m43,i.m14,i.m24,i.m34,i.m44).decompose(s,l,h),t.object3D.quaternion.copy(l),t.object3D.scale.copy(h),t.object3D.position.setZ(2.54*s.z/96/100)}},H(t,e=null,i=!1){if(t.endsWith("%")&&e){let s=getComputedStyle(e);return this.H(i?s.height:s.width,e.parentElement,i)*parseFloat(t.substring(0,t.length-1))*.01}let s=/^\s*([\d\.]+)px\s*$/.exec(t);return s?parseFloat(s[1]):0},M(t,e=null,i=!1){return 2.54*this.H(t,e,i)/96/100},g(t){let e=/^\s*"(.*)"\s*$/.exec(t);return e&&e[1]},C(t){let e=/^\s*url\("(.*)"\)\s*$/.exec(t);return e&&e[1]},A(t){let e=/^((?:rgb|hsl)a?)\(([^\)]*)\)/.exec(t);if(e&&("rgb"==e[1]||"rgba"==e[1])){let t=/^\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)\s*(?:[,/]\s*(\d*\.?\d+)\s*)?$/.exec(e[2]);if(t)return[parseInt(t[1]),parseInt(t[2]),parseInt(t[3]),parseFloat(t[4]||"1")]}return[0,0,0,0]}});"use strict";AFRAME.registerComponent("xyinput",{dependencies:["xylabel"],schema:{value:{default:""},type:{default:""},placeholder:{default:""},caretColor:{default:"#0088ff"},color:{default:"black"},bgColor:{default:"white"}},init(){let t=this.data,e=this.el,i=e.components.xyrect,s=t=>{let i=this.cursor,s=e.value;this.cursor+=t.length,e.value=s.slice(0,i)+t+s.slice(i)};Object.defineProperty(e,"value",{get:()=>t.value,set:t=>e.setAttribute("xyinput","value",""+t)}),this.F=new THREE.Mesh(new THREE.PlaneGeometry(.1,.9)),e.setObject3D("caret",this.F),XYTheme.get(e).createButton(i.width,i.height,null,{color:t.bgColor,hoverColor:t.bgColor},!1,e),e.setAttribute("tabindex",0);let l=t=>{t.clipboardData.setData("text/plain",e.value),t.preventDefault()},h=t=>{s(t.clipboardData.getData("text/plain")),t.preventDefault()},a=this;this.events={click(i){e.focus(),e.emit("xykeyboard-request",t.type);let s=i.detail.intersection;if(s){let t=s.uv.x,i=0,l=e.value.length,h=0;for(;l>i;)a._(h=i+((l-i+1)/2|0))<t?i=h:l=h-1;a.O(i)}},focus(t){a.O(a.cursor),window.addEventListener("copy",l),window.addEventListener("paste",h)},blur(t){a.O(a.cursor),window.removeEventListener("copy",l),window.removeEventListener("paste",h)},keypress(t){"Enter"!=t.code&&s(t.key)},keydown(t){let i=a.cursor,s=e.value;"ArrowLeft"==t.code?i>0&&a.O(i-1):"ArrowRight"==t.code?i<s.length&&a.O(i+1):"Backspace"==t.code&&i>0&&(a.cursor--,e.value=s.slice(0,i-1)+s.slice(i))}}},update(t){let e=this.el,i=this.data,s=e.value,l=this.cursor,h=s.length;(l>h||null==t.value)&&(l=h),e.setAttribute("xylabel",{color:s?i.color:"#aaa",value:("password"==i.type?"*".repeat(h):s)||i.placeholder}),this.F.material.color=new THREE.Color(i.caretColor),this.O(l)},O(t){let e=this.F;this.cursor=t,e.visible=!1,document.activeElement==this.el&&setTimeout(()=>{let i=this.el.components.xyrect.height;e.scale.set(i,i,1),e.position.set(this._(t)+.05*i,0,.02),e.visible=!0},0)},_(t){return this.el.components.xylabel.getPos(t)}}),AFRAME.registerComponent("xyime",{schema:{label:{default:null,type:"selector"}},table:{a:"あ",i:"い",u:"う",e:"え",o:"お",ka:"か",ki:"き",ku:"く",ke:"け",ko:"こ",ga:"が",gi:"ぎ",gu:"ぐ",ge:"げ",go:"ご",sa:"さ",si:"し",su:"す",se:"せ",so:"そ",za:"ざ",zi:"じ",zu:"ず",ze:"ぜ",zo:"ぞ",ta:"た",ti:"ち",tu:"つ",te:"て",to:"と",da:"だ",di:"ぢ",du:"づ",de:"で",do:"ど",na:"な",ni:"に",nu:"ぬ",ne:"ね",no:"の",ha:"は",hi:"ひ",hu:"ふ",he:"へ",ho:"ほ",pa:"ぱ",pi:"ぴ",pu:"ぷ",pe:"ぺ",po:"ぽ",ba:"ば",bi:"び",bu:"ぶ",be:"べ",bo:"ぼ",ma:"ま",mi:"み",mu:"む",me:"め",mo:"も",ya:"や",yi:"い",yu:"ゆ",ye:"いぇ",yo:"よ",ra:"ら",ri:"り",ru:"る",re:"れ",ro:"ろ",wa:"わ",wi:"うぃ",wu:"う",we:"うぇ",wo:"を",xa:"ぁ",xi:"ぃ",xu:"ぅ",xe:"ぇ",xo:"ぉ",xya:"ゃ",xyi:"ぃ",xyu:"ゅ",xye:"ぇ",xyo:"ょ",xtu:"っ",xka:"ヵ",xke:"ヶ",nn:"ん",wyi:"ゐ",wye:"ゑ",fu:"ふ",vu:"ヴ",tsu:"つ",chi:"ち",ji:"じ",shi:"し","-":"ー"},init(){this.enable=!1,this.j="",this.S=[],this.B=0,this.L=this.L.bind(this),document.body.addEventListener("keydown",this.L,!0),document.body.addEventListener("keypress",this.L,!0)},remove(){document.body.removeEventListener("keydown",this.L,!0),document.body.removeEventListener("keypress",this.L,!0)},async convert(t,e){let i=await fetch(`https://www.google.com/transliterate?langpair=ja-Hira|ja&text=${t},`);e((await i.json())[0][1])},L(t){if("CapsLock"==t.code&&t.shiftKey||"HiraganaKatakana"==t.key)return this.enable=!this.enable,void this.$(t.target);if(this.enable&&t.code){if("keypress"==t.type){if(this.S.length>0){if("Space"==t.code)return this.B=(this.B+1)%this.S.length,this.I(this.S[this.B]),void t.stopPropagation();this.$(t.target)}if(t.key.match(/^[^\s]$/)){let e=[[/n([^aiueoyn])/g,"nn$1"],[/([ksthmyrwgzbpdjfv])\1/g,"xtu$1"],[/([kstnhmrgzbpdj])(y[aiueo])/g,"$1ix$2"],[/(j|ch|sh)([aueo])/g,"$1ixy$2"],[/(f|v|ts)(y?[aieo])/g,"$1ux$2"],[/(t|d)h([aiueo])/g,"$1exy$2"]].reduce((t,[e,i])=>t.replace(e,i),this.j+t.key);for(let t=0;t<e.length;t++)for(let i=3;i>=0;i--){let s=this.table[e.slice(t,t+i)];if(s){e=e.slice(0,t)+s+e.slice(t+i);break}}this.I(e)}else if("Space"==t.code&&this.j)this.convert(this.j,t=>{this.S=t,this.B=0,this.I(t[0])}),this.I("");else{if(!this.j)return;this.I(this.j+t.key)}}else{if(!this.j)return;"Enter"==t.code?this.$(t.target):"Backspace"==t.code&&this.I(this.j.slice(0,-1))}t.stopPropagation()}},I(t){this.j=t,(this.data.label||this.el).setAttribute("value",t)},$(t){this.j&&(t.dispatchEvent(new KeyboardEvent("keypress",{key:this.j})),this.I("")),this.S=[]}}),AFRAME.registerComponent("xykeyboard",{schema:{distance:{default:.7},ime:{default:!1}},blocks:{main:{size:[11,4],rows:[{pos:[0,3],keys:["qQ!","wW@","eE#","rR$","tT%","yY^","uU&","iI*","oO(","pP)","-_="]},{pos:[0,2],keys:["aA1","sS2","dD3","fF4","gG5","hH`","jJ~","kK+","lL[",":;]"]},{pos:[0,1],keys:[{code:"Shift",symbols:"⇧⬆"},"zZ6","xX7","cC8","vV9","bB0","nN{","mM}",",'<",'.">',"/?\\"]},{pos:[0,0],keys:[{code:"Space",key:" ",label:"_",size:4}]},{pos:[-4.5,0],keys:[{code:"_Fn",label:"#!"},{code:"HiraganaKatakana",label:"🌐"}]}]},num:{size:[4,4],rows:[{pos:[0,3],keys:["7","8","9","/"]},{pos:[0,2],keys:["4","5","6","*"]},{pos:[0,1],keys:["1","2","3","-"]},{pos:[0,0],keys:["0",":",".","+"]}]},ctrl:{size:[2,4],rows:[{pos:[0,3],keys:[{code:"Backspace",label:"⌫",size:2}]},{pos:[0,2],keys:[{code:"Space",key:" ",label:"SP",size:2}]},{pos:[0,1],keys:[{code:"Enter",label:"⏎",size:2}]},{pos:[1.3,3.5],keys:[{code:"_Close",label:"x",size:.8}]},{pos:[0,0],keys:[{code:"ArrowLeft",label:"⇦"},{code:"ArrowRight",label:"⇨"}]}]}},init(){this.el.sceneEl.addEventListener("xykeyboard-request",t=>this.show(t.detail))},show(t){this.hide();let e=this.el,i=this.data,s=i.ime?[]:["HiraganaKatakana"],l=this.blocks,h=(t,i=[])=>{let s=document.createElement("a-entity"),l=t.size;s.setAttribute("geometry",{primitive:"xy-rounded-rect",width:.2*l[0]+.06,height:.2*l[1]+.06}),s.setAttribute("material",{color:"#222233"});for(let e of t.rows){let t=s.appendChild(document.createElement("a-xycontainer"));t.setAttribute("xycontainer",{direction:"row"}),t.setAttribute("position",{x:.2*e.pos[0],y:.2*e.pos[1]-.2*(l[1]-1)/2,z:.02});for(let s of e.keys){if(i.includes(s.code))continue;let e=t.appendChild(document.createElement("a-xybutton"));e.setAttribute("material","visible",!1),e.setAttribute("xylabel",{value:s.label||"",align:"center"}),e.setAttribute("xyrect",{width:.2*(s.size||1),height:.2}),e.addEventListener("mouseenter",t=>e.setAttribute("material","visible",!0)),e.addEventListener("mouseleave",t=>e.setAttribute("material","visible",!1)),(s.symbols||"string"==typeof s)&&(e.classList.add("xyinput-key"),e.dataset.keySymbols=s.symbols||s),"_Close"==s.code&&(e.classList.add("xyinput-close"),e.addEventListener("click",t=>this.hide())),e.addEventListener("mousedown",t=>{if(document.activeElement==document.body&&this.X&&this.X.focus(),this.X=document.activeElement,setTimeout(()=>this.X.focus(),0),t.preventDefault(),"_Fn"==s.code)return void this.Y(2==this.N?0:2);"Shift"==s.code&&this.Y((this.N+1)%2);let e=s.code?s.key:s,i={key:e?e[this.N]||e[0]:s.code,code:s.code||s[0].toUpperCase()},l=(t,e)=>{this.X.dispatchEvent(new KeyboardEvent(t,e))};l("keydown",i),l("keyup",i),e&&l("keypress",i)})}}return e.appendChild(s)};if("number"==t){let t=l.num.size[0]+l.ctrl.size[0];h(l.num),h(l.ctrl).setAttribute("position","x",.2*(t/2+.4))}else if("full"==t){let t=l.main.size[0]+l.ctrl.size[0];h(l.main,s),h(l.ctrl,["Space"]).setAttribute("position","x",.2*(t/2+.4)),t+=l.ctrl.size[0]+l.num.size[0],h(l.num).setAttribute("position","x",.2*(t/2+.8))}else{let t=l.main.size[0]+l.ctrl.size[0];h(l.main,s),h(l.ctrl,["Space"]).setAttribute("position","x",.2*(t/2+.4))}if(i.ime){let t=e.appendChild(document.createElement("a-xylabel"));t.setAttribute("xylabel",{color:"yellow",renderingMode:"canvas"}),t.setAttribute("position",{x:0,y:.38,z:.03}),t.setAttribute("xyrect",{width:1.6,height:.12}),t.setAttribute("xyime","")}e.setAttribute("xy-drag-control","draggable",".xyinput-close"),this.Y(0);let a=e.object3D,o=a.position,r=a.parent.matrixWorld.clone().invert().multiply(e.sceneEl.camera.matrixWorld),n=o.y;o.set(0,0,-i.distance).applyMatrix4(r),o.y=n,a.rotation.y=(new THREE.Euler).setFromRotationMatrix(r.extractRotation(r),"YXZ").y},hide(){let t=this.el;for(this.X=null,t.removeAttribute("xy-drag-control");t.firstChild;)t.removeChild(t.firstChild)},Y(t){this.N=t;for(let e of this.el.querySelectorAll(".xyinput-key")){let i=e.dataset.keySymbols;e.setAttribute("xylabel","value",i[t]||i[0])}}}),AFRAME.registerPrimitive("a-xykeyboard",{defaultComponents:{xykeyboard:{}},mappings:{ime:"xykeyboard.ime",distance:"xykeyboard.distance"}}),AFRAME.registerPrimitive("a-xyinput",{defaultComponents:{xyrect:{width:2,height:.5},xyinput:{}},mappings:{width:"xyrect.width",height:"xyrect.height",value:"xyinput.value",type:"xyinput.type",placeholder:"xyinput.placeholder","caret-color":"xyinput.caretColor","background-color":"xyinput.bgColor"}}),AFRAME.registerComponent("xycontainer",{dependencies:["xyrect"],schema:{spacing:{default:0},padding:{default:0},reverse:{default:!1},wrap:{default:"nowrap",oneOf:["wrap","nowrap"]},direction:{default:"column",oneOf:["none","row","column","vertical","horizontal"]},alignItems:{default:"none",oneOf:["none","center","start","end","baseline","stretch"]},justifyItems:{default:"start",oneOf:["center","start","end","space-between","space-around","stretch"]},alignContent:{default:"",oneOf:["","none","start","end","center","stretch"]}},init(){for(let t of["child-attached","child-detached","xyresize"])this.el.addEventListener(t,t=>t.target==this.el&&setTimeout(()=>this.update()))},update(){let t=this.data,e=t.direction;if("none"==e)return;let i=this.el.components.xyrect.data?this.el.components.xyrect:{data:{height:-1,width:-1}},s=this.el.children,l="vertical"==e||"column"==e,h=t.padding,a=t.spacing,o=t.reverse!=l?-1:1,r=(t,e)=>l?[e,t*o]:[t*o,-e],n=(t,e)=>l?[e,t]:[t,e],[d,u]=n(i.width-2*h,i.height-2*h),[c,y]=n("width","height"),x=0,f=0,p=[],g=[],m=0,w=0,b=0,E=0,v=()=>{x=Math.max(x,m+a*(p.length-1)),f+=E,g.push([p,m,w,b,E]),p=[],m=0,w=0,b=0,E=0};for(let e of s){let i=e.getAttribute("xyitem");if(i&&i.fixed)continue;let s=e.components.xyrect||e.getAttribute("geometry")||{width:+(e.getAttribute("width")||NaN),height:+(e.getAttribute("height")||NaN)},l=e.getAttribute("scale")||{x:1,y:1},h=n(s.width*l.x,s.height*l.y),[o,r]=h;if(null==o||isNaN(o))continue;let u=s.data?s.data.pivot:{x:.5,y:.5};"wrap"==t.wrap&&m>0&&m+o+a*p.length>d&&v(),p.push([e,i,h,n(u.x,u.y),n(l.x,l.y)]),m+=o,w+=i?i.grow:1,b+=i?i.shrink:1,E=r>E?r:E}p.length>0&&v(),f+=a*(g.length-1),-1==i.data[c]&&(d=x,i[c]=x+2*h),-1==i.data[y]&&(u=f,i[y]=f+2*h);let R=-u/2,k=0,T=t.alignContent||t.alignItems;"end"==T?R+=u-f:"center"==T?R+=(u-f)/2:"stretch"!=T&&"none"!=T||(k=(u-f)/g.length);for(let[t,e,i,s,l]of g)this.K(t,e,i,s,-d/2,R,d,l+k,c,y,r),R+=l+k+a},K(t,e,i,s,l,h,a,o,r,n,d){let{justifyItems:u,alignItems:c,spacing:y,wrap:x}=this.data,f=0,p=t.length;"center"===u?l+=(a-e-y*p)/2:"end"===u?l+=a-e-y*p:"stretch"===u?f=(f=a-e-y*(p-1))>0?i>0?f/i:0:s>0?f/s:0:"space-between"===u?y=(a-e)/(p-1):"space-around"===u&&(l+=(y=(a-e)/p)/2);for(let[e,i,[s,a],[u,p],[g,m]]of t){let t=i&&i.align||c,w=(i?f>0?i.grow:i.shrink:1)*f,b=h+o/2,E=e.getAttribute("position")||{x:0,y:0};g>0&&0!=w&&e.setAttribute(r,(s+=w)/g),m>0&&"stretch"===t&&e.setAttribute(n,(a=o)/m),"start"===t||"stretch"===t?b=h+p*a:"end"===t?b=h+o-(1-p)*a:"center"===t?b+=(p-.5)*a:"none"===t&&"wrap"!=x&&(b="width"==n?E.x:-E.y),[E.x,E.y]=d(l+s*u,b),e.setAttribute("position",E),l+=s+y}}}),AFRAME.registerComponent("xyitem",{schema:{align:{default:"none",oneOf:["none","center","start","end","baseline","stretch"]},grow:{default:1},shrink:{default:1},fixed:{default:!1}},update(t){if(t.align){let t=this.el.parentNode.components.xycontainer;t&&t.update()}}}),AFRAME.registerComponent("xyrect",{schema:{width:{default:-1},height:{default:-1},pivot:{type:"vec2",default:{x:.5,y:.5}}},update(t){let e=this.el,{width:i,height:s}=this.data,l=e.getAttribute("geometry")||{};this.width=i<0?+(e.getAttribute("width")||l.width||0):i,this.height=s<0?+(e.getAttribute("height")||l.height||0):s,void 0!==t.width&&e.emit("xyresize",{xyrect:this},!1)}}),AFRAME.registerPrimitive("a-xycontainer",{defaultComponents:{xyrect:{},xycontainer:{}},mappings:{width:"xyrect.width",height:"xyrect.height",direction:"xycontainer.direction",spacing:"xycontainer.spacing",padding:"xycontainer.padding",reverse:"xycontainer.reverse",wrap:"xycontainer.wrap","align-items":"xycontainer.alignItems","justify-items":"xycontainer.justifyItems","align-content":"xycontainer.alignContent"}});const XYTheme={get(t){return this.defaultTheme},defaultTheme:{button:{color:"#222",labelColor:"#fff",hoverColor:"#333",geometry:{},hoverHaptic:.3,hoverHapticMs:10},window:{closeButton:{color:"#111",hoverColor:"#f00"},titleBar:{color:"#111"},background:{color:"#111",side:"double",transparent:!0,opacity:.8}},thumb:{color:"white",hoverColor:"#ccf",geometry:{primitive:"circle"}},collidableClass:"collidable",createButton(t,e,i,s,l,h,a=!1){if((h=h||document.createElement("a-entity")).hasAttribute("style"))return h;let o=t=>s&&s[t]||this.button[t];if(!a){if(i&&(i.append(h),i.hasAttribute("style")))return h.setAttribute("style",""),h;h.classList.add(this.collidableClass),h.addEventListener("mouseenter",t=>{h.setAttribute("material",{color:o("hoverColor")});let e=o("hoverHaptic");if(e){let i=t.detail.cursorEl.components["tracked-controls"],s=i&&i.controller,l=s&&s.hapticActuators;l&&l[0]&&l[0].pulse(e,o("hoverHapticMs"))}}),h.addEventListener("mouseleave",t=>{h.setAttribute("material",{color:o("color")})}),h.addEventListener("xyresize",t=>{let e=t.detail.xyrect;h.setAttribute("geometry",{width:e.width,height:e.height})})}return h.hasAttribute("geometry")||h.setAttribute("geometry",Object.assign({primitive:"xy-rounded-rect",width:t,height:e,radius:.1*Math.min(t,e)},o("geometry"))),h.setAttribute("material",{color:o("color")}),l&&h.setAttribute("xylabel",{color:o("labelColor")}),h}}};AFRAME.registerGeometry("xy-rounded-rect",{schema:{height:{default:1,min:0},width:{default:1,min:0},radius:{default:0,min:0},radiusBL:{default:0,min:0},radiusBR:{default:0,min:0},radiusTL:{default:0,min:0},radiusTR:{default:0,min:0}},init(t){let e=new THREE.Shape,i=(t.width||.01)/2,s=(t.height||.01)/2,l=t.radius,h=t.radiusTL||l,a=t.radiusTR||l,o=t.radiusBL||l,r=t.radiusBR||l,n=Math.PI/2;e.moveTo(-i,-s+o),e.lineTo(-i,s-h),h&&e.arc(h,0,h,2*n,1*n,!0),e.lineTo(i-a,s),a&&e.arc(0,-a,a,1*n,0*n,!0),e.lineTo(i,-s+r),r&&e.arc(-r,0,r,0*n,3*n,!0),e.lineTo(-i+o,-s),o&&e.arc(0,o,o,3*n,2*n,!0),this.geometry=new THREE.ShapeGeometry(e)}}),AFRAME.registerComponent("xylabel",{dependencies:["xyrect"],schema:{value:{default:""},color:{default:"white"},align:{default:"left"},wrapCount:{default:0},xOffset:{default:0},zOffset:{default:.01},resolution:{default:32},renderingMode:{default:"auto",oneOf:["auto","canvas"]}},init(){this.el.addEventListener("xyresize",t=>this.update())},update(){let t=this.data,e=this.el,i=t.value,{width:s,height:l}=e.components.xyrect,h=t.wrapCount;if(0==h&&l>0&&(h=Math.max(s/l/.65,i.length)+1),""==i)return void this.remove();if("auto"==t.renderingMode&&!/[\u0100-\uDFFF]/.test(i)){let i=Object.assign({},t,{wrapCount:h,width:s,height:l});return delete i.resolution,delete i.renderingMode,e.setAttribute("text",i),e.components.text.data.mode="pre",setTimeout(()=>{let t=e.getObject3D("text");t&&(t.raycast=(()=>{}))},0),void this.D()}let a=t.resolution,o=Math.floor(a*h*.65),r=this.P||document.createElement("canvas"),n=.9*a+"px bold sans-serif",d=r.getContext("2d");d.font=n;let u=[""],c=0;for(let t of i)("\n"==t||d.measureText(u[c]+t).width>o)&&(u.push(""),c++),"\n"!=t&&(u[c]+=t);let y=a*u.length;if(!this.P||this.textWidth!=o||r.height!=y){let i=8;for(;i<o;)i*=2;this.remove(),this.P=r,r.height=y,r.width=i,this.q=o;let h=this.V=new THREE.CanvasTexture(r);h.anisotropy=4,h.repeat.x=o/i;let a=Math.min(s/o*y,l),n=new THREE.Mesh(new THREE.PlaneGeometry(s,a),new THREE.MeshBasicMaterial({map:h,transparent:!0}));n.position.set(t.xOffset,0,t.zOffset),n.raycast=(()=>{}),e.setObject3D("xylabel",n)}d.clearRect(0,0,o,y),d.font=n,d.textBaseline="top",d.textAlign=t.align,d.fillStyle=t.color;let x="center"===t.align?o/2:0,f=.1*a;for(let t of u)d.fillText(t,x,f),f+=a;this.V.needsUpdate=!0},remove(){this.D(),this.el.hasAttribute("text")&&this.el.removeAttribute("text")},D(){let t=this.el,e=t.getObject3D("xylabel");e&&(e.material.map.dispose(),e.material.dispose(),e.geometry.dispose(),t.removeObject3D("xylabel"),this.P=null)},getPos(t){let{text:e,xyrect:i}=this.el.components,s=this.data.value,l=0;if(this.P){l=this.P.getContext("2d").measureText(s.slice(0,t)).width/this.q}else if(e){let i=e.geometry.layout,h=i.glyphs,a=h.length,o=Math.max(0,a+t-s.length),r=h[Math.min(o,a-1)];l=r?(r.position[0]+r.data.width*(o>=a?1:.1))/i.width:0}return(l-.5)*i.width}}),AFRAME.registerComponent("xybutton",{dependencies:["xyrect"],schema:{color:{default:""},hoverColor:{default:""},labelColor:{default:""}},init(){let t=this.el,e=t.components.xyrect;XYTheme.get(t).createButton(e.width,e.height,null,this.data,!0,t)}}),AFRAME.registerComponent("xytoggle",{dependencies:["xyrect"],schema:{value:{default:!1}},events:{click(t){let e=this.el;e.value=!e.value,e.emit("change",{value:e.value},!1)}},init(){let t=this.el;Object.defineProperty(t,"value",{get:()=>this.data.value,set:e=>{t.setAttribute("xytoggle","value",e),t.setAttribute("value",e)}});let e=XYTheme.get(t);this.G=e.createButton(0,0,t,e.thumb),t.addEventListener("xyresize",t=>this.update())},update(){let t=this.el,e=t.components.xyrect,i=e.height,s=e.width,l=t.value,h={color:l?"#0066ff":XYTheme.get(t).button.color,hoverColor:l?"#4499ff":"",geometry:{radius:i/2}};XYTheme.get(t).createButton(s,i,null,h,!0,t,null!=this.U),this.U=Object.assign(this.U||h,h),this.G.setAttribute("geometry","radius",.4*i),this.G.object3D.position.set((s-i)/2*(l?1:-1),0,.01)}}),AFRAME.registerComponent("xyselect",{dependencies:["xyrect","xybutton"],schema:{values:{default:[]},label:{default:""},toggle:{default:!1},select:{default:0}},events:{click(t){let e=this.data;e.toggle?this.select((e.select+1)%e.values.length):this.W?this.hide():this.show()}},init(){let t=this.el;if(this.data.toggle)t.setAttribute("xylabel","align","center");else{(this.Z=t.appendChild(document.createElement("a-triangle"))).setAttribute("geometry",{vertexA:{x:.1,y:.03,z:0},vertexB:{x:-.1,y:.03,z:0},vertexC:{x:0,y:-.12,z:0}}),t.addEventListener("xyresize",t=>this.update())}},update(){let t=this.data,e=this.el;e.setAttribute("xylabel",{value:t.label||t.values[t.select]}),this.Z&&this.Z.object3D.position.set(e.components.xyrect.width/2-.2,0,.05)},show(){if(this.W)return;let t=this.data.values,e=this.el.components.xyrect.height,i=(e+t.length*e)/2,s=this.W=document.createElement("a-xycontainer");t.forEach((t,i)=>{let l=s.appendChild(document.createElement("a-xybutton"));l.setAttribute("height",e),l.setAttribute("label",t),l.addEventListener("click",t=>{t.stopPropagation(),this.select(i),this.hide()})}),s.object3D.position.set(0,i,.1),this.el.appendChild(s)},select(t){this.el.setAttribute("xyselect","select",t),this.el.emit("change",{value:this.data.values[t],index:t},!1)},hide(){this.W&&(this.el.removeChild(this.W),this.W.destroy(),this.W=null)}}),AFRAME.registerComponent("xydraggable",{schema:{dragThreshold:{default:.02},base:{type:"selector",default:null}},init(){let t=this.el;t.classList.add(XYTheme.get(t).collidableClass),this.J=this.J.bind(this),t.addEventListener("mousedown",this.J),this.tt=null},remove(){this.el.removeEventListener("mousedown",this.J)},tick(){this.tt?this.tt("xy-drag"):this.pause()},J(t){if(!t.detail.cursorEl||!t.detail.cursorEl.components.raycaster)return;let e=(this.data.base||this.el).object3D,i=t.detail.cursorEl,s=i.components.raycaster.raycaster,l=new THREE.Vector3,h=s.ray.direction.clone(),a=new THREE.Plane(new THREE.Vector3(0,0,-1),0).applyMatrix4(e.matrixWorld),o=t.detail.intersection;o&&a.setFromNormalAndCoplanarPoint(e.getWorldDirection(l),o.point),null===s.ray.intersectPlane(a,l)&&e.worldToLocal(l);let r=s.ray.clone(),n=l.clone(),d=this,u=!1;t.stopPropagation();let c=d.tt=(t=>{if(!u){if(h.manhattanDistanceTo(s.ray.direction)<d.data.dragThreshold)return;t="xy-dragstart",d.dragging=u=!0}n.copy(l),null!==s.ray.intersectPlane(a,l)&&e.worldToLocal(l),d.el.emit(t,{raycaster:s,point:l,pointDelta:n.sub(l),prevRay:r,cursorEl:i},!1),r.copy(s.ray)});d.play();let y=e=>e.target!=t.target&&e.stopPropagation();window.addEventListener("mouseenter",y,!0),window.addEventListener("mouseleave",y,!0);let x=t=>{if(t.detail.cursorEl==i&&(window.removeEventListener("mouseup",x),window.removeEventListener("mouseenter",y,!0),window.removeEventListener("mouseleave",y,!0),d.tt=null,u)){d.dragging=!1;let t=t=>t.stopPropagation();window.addEventListener("click",t,!0),setTimeout(()=>window.removeEventListener("click",t,!0),0),c("xy-dragend")}};window.addEventListener("mouseup",x)}}),AFRAME.registerComponent("xy-drag-control",{schema:{target:{type:"selector",default:null},draggable:{default:""},autoRotate:{default:!1}},init(){this.et=this.et.bind(this),this.it=[],this.st=new THREE.Quaternion},update(t){let e=this.data.draggable;e!==t.draggable&&(this.remove(),this.it=Array.isArray(e)?e:e?this.el.querySelectorAll(e):[this.el],this.it.forEach(t=>{t.setAttribute("xydraggable",{}),t.addEventListener("xy-dragstart",this.et),t.addEventListener("xy-drag",this.et)}))},remove(){this.it.forEach(t=>{t.removeAttribute("xydraggable"),t.removeEventListener("xy-dragstart",this.et),t.removeEventListener("xy-drag",this.et)})},et(t){let e=this.el,i=this.data,s=t.detail,{origin:l,direction:h}=s.raycaster.ray,{origin:a,direction:o}=s.prevRay,r=s.cursorEl,n=(i.target||e).object3D,d=new THREE.Quaternion;r.components["tracked-controls"]?"xy-dragstart"!=t.type?d.copy(this.st).invert().premultiply(r.object3D.getWorldQuaternion(this.st)):r.object3D.getWorldQuaternion(this.st):d.setFromUnitVectors(o,h);let u=n.parent.matrixWorld,c=new THREE.Matrix4,y=(new THREE.Matrix4).makeRotationFromQuaternion(d).multiply(c.setPosition(a.clone().negate())).premultiply(c.setPosition(l)).premultiply(u.clone().invert()).multiply(u);if(n.applyMatrix4?n.applyMatrix4(y):n.applyMatrix(y),this.postProcess&&this.postProcess(n,t),i.autoRotate){let e=n.getWorldPosition(new THREE.Vector3),i=l.clone().sub(e).normalize(),s=.8-i.y*i.y;if(s>0){let i=r.components.raycaster.getIntersection(t.target),h=n.parent.worldToLocal(i?i.point:e),a=n.quaternion.clone();y.lookAt(l,e,new THREE.Vector3(0,1,0)),n.quaternion.slerp(d.setFromRotationMatrix(y.premultiply(u.clone().invert())),.1*s),n.position.sub(h).applyQuaternion(a.invert().premultiply(n.quaternion)).add(h)}}}}),AFRAME.registerComponent("xywindow",{schema:{title:{default:""},titleHeight:{default:.5},closable:{default:!0},background:{default:!1}},init(){let t=this.el,e=XYTheme.get(t),i=e.window,s=this.controls=t.appendChild(document.createElement("a-entity")),l=this.data.titleHeight;if(s.setAttribute("xyitem",{fixed:!0}),this.data.background){let e=this.lt=s.appendChild(document.createElement("a-plane"));e.setAttribute("material",i.background),e.object3D.position.set(0,l/2,-.04),t.addEventListener("object3dset",e=>{let i=t.object3D.children,l=i.indexOf(s.object3D);l>0&&i.unshift(...i.splice(l,1))})}if((this.ht=e.createButton(1,l,s,i.titleBar,!0)).setAttribute("xy-drag-control",{target:t,autoRotate:!0}),this.ot=[],this.data.closable){let h=e.createButton(l,l,s,i.closeButton,!0);h.setAttribute("xylabel",{value:"X",align:"center"}),h.addEventListener("click",e=>t.parentNode.removeChild(t)),this.ot.push(h)}t.addEventListener("xyresize",t=>{this.update({})})},update(t){let e=this.el,i=this.data,s=i.title,l=i.titleHeight,{width:h,height:a}=e.components.xyrect,o=this.ht,r=this.lt,n=0,d=a/2+.6*l;for(let t of this.ot)t.object3D.position.set((h-l)/2-n,d,0),n+=1.04*l;if(s!=t.title){let t=h-n-l/5;o.setAttribute("xyrect",{width:t,height:.9*l}),o.setAttribute("xylabel",{value:s,wrapCount:Math.max(10,t/(.4*l)),xOffset:l/5})}o.setAttribute("geometry",{width:h-n}),o.object3D.position.set(-n/2,d,0),r&&r.object3D.scale.set(h+.2*l,a+1.4*l,1)}}),AFRAME.registerComponent("xyrange",{dependencies:["xyrect"],schema:{min:{default:0},max:{default:100},step:{default:0},value:{default:0},color0:{default:"white"},color1:{default:"#06f"},thumbSize:{default:.4},barHeight:{default:.08}},init(){let t=this.data,e=this.el,i=XYTheme.get(e),s=this.G=i.createButton(0,0,e,i.thumb);i.createButton(0,0,null,{color:t.color0,hoverColor:t.color0},!1,e);let l=new THREE.PlaneGeometry(1,1),h=this.rt=new THREE.Mesh(l),a=this.nt=new THREE.Mesh(l);e.setObject3D("xyrange",(new THREE.Group).add(h,a)),s.setAttribute("xydraggable",{base:e,dragThreshold:0}),s.addEventListener("xy-drag",i=>{let s=e.components.xyrect.width-t.thumbSize,l=(i.detail.point.x+s/2)/s*(t.max-t.min);t.step>0&&(l=Math.round(l/t.step)*t.step),this.setValue(l+t.min,!0)}),Object.defineProperty(e,"value",{get:()=>t.value,set:t=>this.setValue(t,!1)})},update(){let t=this.data,e=t.barHeight,i=this.el.components.xyrect.width-t.thumbSize,s=t.max-t.min,l=s>0?i*(t.value-t.min)/s:0,h=this.nt,a=this.rt,o=this.G;a.scale.set(i,e,1),a.material.color=new THREE.Color(t.color0),h.scale.set(l,e,1),h.position.set((l-i)/2,0,.02),h.material.color=new THREE.Color(t.color1),o.setAttribute("geometry","radius",t.thumbSize/2),o.object3D.position.set(l-i/2,0,.04)},setValue(t,e){if(!this.G.components.xydraggable.dragging||e){let i=this.data,s=Math.max(Math.min(t,i.max),i.min);s!=i.value&&e&&this.el.emit("change",{value:s},!1),this.el.setAttribute("xyrange","value",s)}}}),AFRAME.registerComponent("xyclipping",{dependencies:["xyrect"],schema:{exclude:{type:"selector",default:null},clipTop:{default:!0},clipBottom:{default:!0},clipLeft:{default:!1},clipRight:{default:!1}},init(){this.el.sceneEl.renderer.localClippingEnabled=!0,this.dt=[],this.ut=[],this.ct=null,this.yt={},this.update=this.update.bind(this),this.el.addEventListener("xyresize",this.update)},update(){let t=this.data,e=this.el.components.xyrect,i=this.dt=[];t.clipBottom&&i.push(new THREE.Plane(new THREE.Vector3(0,1,0),0)),t.clipTop&&i.push(new THREE.Plane(new THREE.Vector3(0,-1,0),e.height)),t.clipLeft&&i.push(new THREE.Plane(new THREE.Vector3(1,0,0),0)),t.clipRight&&i.push(new THREE.Plane(new THREE.Vector3(-1,0,0),e.width)),this.ut=i.map(t=>t.clone()),this.xt()},remove(){this.el.removeEventListener("xyresize",this.update),this.ut.splice(0);for(let[t,e]of Object.values(this.yt))t.raycast=e},tick(){this.el.object3D.matrixWorld.equals(this.ct)||this.xt()},xt(){this.ct=this.el.object3D.matrixWorld.clone(),this.dt.forEach((t,e)=>{this.ut[e].copy(t).applyMatrix4(this.ct)}),this.applyClippings()},applyClippings(){let t=this.data.exclude&&this.data.exclude.object3D,e=i=>{if(i!==t){if(i.material&&void 0!==i.material.clippingPlanes&&(i.material.clippingPlanes=this.ut,!this.yt[i.uuid])){let t=i.raycast;this.yt[i.uuid]=[i,t],i.raycast=((e,s)=>{let l=s.length;t.apply(i,[e,s]);let h=s[l];h&&this.ut.some(t=>t.distanceToPoint(h.point)<0)&&s.pop()})}for(let t of i.children)e(t)}};e(this.el.object3D)}}),AFRAME.registerComponent("xyscroll",{dependencies:["xyrect"],schema:{scrollbar:{default:!0}},init(){this.ft=this.pt=this.gt=0,this.wt=0,this.bt=0;let t=this.el,e=this.Et=this.vt(t,.3);t.setAttribute("xyclipping",{exclude:e}),t.setAttribute("xydraggable",{}),t.addEventListener("xy-drag",t=>{let e=t.detail.pointDelta;this.gt=-e.y,this.Rt(e.x,-e.y)}),t.addEventListener("xy-dragstart",t=>this.pause()),t.addEventListener("xy-dragend",t=>this.play()),t.addEventListener("xyresize",t=>this.update());let i=this.kt();i&&i.addEventListener("xyresize",t=>this.update())},kt(){for(let t of this.el.children)if(t!==this.Et&&!(t.getAttribute("xyitem")||{}).fixed)return t},vt(t,e){let i=XYTheme.get(t),s=t.appendChild(document.createElement("a-entity"));return this.Tt=i.createButton(e,e,s),this.Tt.addEventListener("click",t=>{this.gt=-this.At,this.play()}),this.Mt=i.createButton(e,e,s),this.Mt.addEventListener("click",t=>{this.gt=this.At,this.play()}),this.Ht=i.createButton(.7*e,1,s),this.Ht.setAttribute("xydraggable",{base:s}),this.Ht.addEventListener("xy-drag",t=>{this.Rt(0,t.detail.pointDelta.y*(this.wt-this.el.components.xyrect.height)/(this.Ct-this.bt||1))}),s},update(){let t=this.el.components.xyrect,e=t.height;this.Et.setAttribute("visible",this.data.scrollbar),this.Et.setAttribute("position",{x:t.width+.1,y:0,z:.05}),this.Tt.setAttribute("position",{x:0,y:e-.15,z:0}),this.Mt.setAttribute("position",{x:0,y:.15,z:0}),this.At=.3*Math.max(e/2,.5),this.zt=e-.3,this.Ct=e-.6,this.Rt(0,0)},tick(){Math.abs(this.gt)>.001?(this.gt*=.8,this.Rt(0,this.gt)):this.pause()},Rt(t,e){this.setScroll(this.ft+t,this.pt+e)},setScroll(t,e){let i=this.kt();if(!i)return;let s=this.el,{width:l,height:h}=s.components.xyrect,a=i.components.xyrect,o=a.height,r=a.width;i.components.xyrec||i.setAttribute("xyrect",{}),this.ft=Math.max(0,Math.min(t,r-l)),this.pt=Math.max(0,Math.min(e,o-h)),this.wt=o;let n=this.bt=Math.max(.2,Math.min(this.Ct*h/o,this.Ct)),d=this.zt-n/2-(this.Ct-n)*this.pt/(o-h||1);this.Ht.setAttribute("geometry","height",n),this.Ht.setAttribute("position","y",d);let u=a.data.pivot,c=u.x*a.width-this.ft,y=(1-u.y)*a.height-this.pt;i.setAttribute("position",{x:c,y:h-y}),i.emit("xyviewport",[y,y-h,-c,l-c],!1);let x=s.components.xyclipping;x&&x.applyClippings()}}),AFRAME.registerComponent("xylist",{dependencies:["xyrect"],schema:{itemWidth:{default:-1},itemHeight:{default:-1}},events:{click(t){for(let e of t.composedPath()){let i=e.dataset.listPosition;if(null!=i&&i>=0){this.el.emit("clickitem",{index:i,ev:t},!1);break}}}},init(){let t=this.el,e=this.data;this.Ft=null,this._t={},this.Ot=[],this.jt=null,this.St=0,this.Bt={size(t,i){if(e.itemHeight<=0){let t=i.Ft.create();e.itemHeight=+t.getAttribute("height"),e.itemWidth=+t.getAttribute("width")}return{width:e.itemWidth,height:e.itemHeight*t}},*targets(t){let i=e.itemHeight,s=Math.floor(-t[0]/i),l=Math.ceil(-t[1]/i);for(;s<l;)yield s++},layout(t,i){let s=t.components.xyrect,l=s?s.data.pivot:{x:.5,y:.5};t.setAttribute("position",{x:0+l.x*s.width,y:-i*e.itemHeight-l.y*s.height,z:0})}},t.setAttribute("xyrect","pivot",{x:0,y:1}),t.addEventListener("xyviewport",t=>this.setViewport(t.detail)),this.setViewport([0,0])},setLayout(t){this.Bt=t},setAdapter(t){this.Ft=t},setContents(t,e,i=!0){if(i)for(let t of Object.values(this._t))t.dataset.listPosition=-1,t.setAttribute("position","y",999);this.jt=t,this.St=e=null!=e?e:t.length,this.el.setAttribute("xyrect",this.Bt.size(e,this)),this.Lt()},setViewport(t){this.$t=t,this.Lt()},Lt(){let t=this.el,e=this.Ft,i=this.Bt,s=this._t,l={};if(e){for(let h of i.targets(this.$t))if(h>=0&&h<this.St){let a=s[h];a||(a=s[h]=this.Ot.pop()||t.appendChild(e.create(t))).classList.add(XYTheme.get(t).collidableClass),l[h]=a;let o=a.dataset;if(o.listPosition!=h){o.listPosition=h;let t=()=>{o.listPosition==h&&(i.layout(a,h),e.bind(h,a,this.jt))};a.hasLoaded?t():a.addEventListener("loaded",t,{once:!0})}}for(let[t,e]of Object.entries(s))e.setAttribute("visible",null!=l[t]),l[t]||this.Ot.push(e);this._t=l}}}),AFRAME.registerPrimitive("a-xylabel",{defaultComponents:{xyrect:{},xylabel:{}},mappings:{width:"xyrect.width",height:"xyrect.height",value:"xylabel.value",color:"xylabel.color",align:"xylabel.align","wrap-count":"xylabel.wrapCount"}}),AFRAME.registerPrimitive("a-xybutton",{defaultComponents:{xyrect:{width:2,height:.5},xylabel:{align:"center"},xybutton:{}},mappings:{width:"xyrect.width",height:"xyrect.height",label:"xylabel.value",align:"xylabel.align",color:"xybutton.color","hover-color":"xybutton.hoverColor","label-color":"xybutton.labelColor"}}),AFRAME.registerPrimitive("a-xytoggle",{defaultComponents:{xyrect:{width:.8,height:.4},xytoggle:{}},mappings:{width:"xyrect.width",height:"xyrect.height",value:"xytoggle.value"}}),AFRAME.registerPrimitive("a-xyselect",{defaultComponents:{xyrect:{width:2,height:.5},xyselect:{}},mappings:{width:"xyrect.width",height:"xyrect.height",values:"xyselect.values",label:"xyselect.label",toggle:"xyselect.toggle",select:"xyselect.select",color:"xybutton.color","hover-color":"xybutton.hoverColor","label-color":"xybutton.labelColor"}}),AFRAME.registerPrimitive("a-xywindow",{defaultComponents:{xycontainer:{alignItems:"center"},xywindow:{}},mappings:{width:"xyrect.width",height:"xyrect.height",title:"xywindow.title"}}),AFRAME.registerPrimitive("a-xyscroll",{defaultComponents:{xyrect:{pivot:{x:0,y:1}},xyscroll:{}},mappings:{width:"xyrect.width",height:"xyrect.height",scrollbar:"xyscroll.scrollbar"}}),AFRAME.registerPrimitive("a-xyrange",{defaultComponents:{xyrect:{},xyrange:{}},mappings:{width:"xyrect.width",height:"xyrect.height",min:"xyrange.min",max:"xyrange.max",step:"xyrange.step",value:"xyrange.value","bar-height":"xyrange.barHeight"}});