@kitschpatrol/tweakpane-plugin-rotation
Version:
A fork of tweakpane-plugin-rotation with build optimizations.
2 lines (1 loc) • 32.7 kB
JavaScript
import{SVG_NS as t,ClassName as e,createValue as i,PointerHandler as n,isArrowKey as s,getStepForKey as o,getHorizontalStepKeys as r,getVerticalStepKeys as a,bindValueMap as l,valueToClassName as h,Foldable as c,PointNdTextController as d,PopupController as p,connectValues as u,bindFoldable as m,forceCast as _,findNextTarget as v,supportsTouch as w,ValueMap as x,createNumberFormatter as g,isEmpty as y,StepConstraint as z,RangeConstraint as b,CompositeConstraint as A,createPlugin as f,PointNdConstraint as C,TpError as E,parseNumber as L,parseRecord as M,parsePointDimensionParams as k,parsePickerLayout as P}from"@tweakpane/core";class B{multiply(t){return this.format(this.quat.multiply(t.quat))}premultiply(t){return this.format(t.multiply(this))}slerp(t,e){return this.format(this.quat.slerp(t.quat,e))}}function F(t,e,i){return Math.min(Math.max(t,e),i)}function q(t,e){return t-function(t,e){return Math.floor(t/e)*e}(t,e)}function j(t){return q(t+Math.PI,2*Math.PI)-Math.PI}class N extends B{static fromQuaternion(t,e,i){const n=t.toMat3(),[s,o,r,a]="XYZ"===e?[0,1,2,1]:"XZY"===e?[0,2,1,-1]:"YXZ"===e?[1,0,2,-1]:"YZX"===e?[1,2,0,1]:"ZXY"===e?[2,0,1,1]:[2,1,0,-1],l=[0,0,0],h=n[r+3*s];return l[o]=-a*Math.asin(F(h,-1,1)),Math.abs(h)<.999999?(l[s]=a*Math.atan2(n[r+3*o],n[4*r]),l[r]=a*Math.atan2(n[o+3*s],n[4*s])):l[s]=a*Math.atan2(-n[o+3*r],n[4*o]),Math.abs(l[s])+Math.abs(l[r])>Math.PI&&(l[s]=j(l[s]+Math.PI),l[o]=j(Math.PI-l[o]),l[r]=j(l[r]+Math.PI)),new N(...l,e).reunit(i)}constructor(t,e,i,n,s){super(),this.x=null!=t?t:0,this.y=null!=e?e:0,this.z=null!=i?i:0,this.order=null!=n?n:"XYZ",this.unit=null!=s?s:"rad"}get quat(){return S.fromEuler(this)}getComponents(){return[this.x,this.y,this.z]}toEuler(t,e){return this.reorder(t).reunit(e)}format(t){return t instanceof N?t.reorder(this.order):t.toEuler(this.order,this.unit)}reorder(t){return t===this.order?this:this.quat.toEuler(t,this.unit)}reunit(t){const e={deg:Math.PI/180,rad:1,turn:2*Math.PI}[this.unit]*{deg:180/Math.PI,rad:1,turn:.5/Math.PI}[t];return new N(e*this.x,e*this.y,e*this.z,this.order,t)}}class S extends B{static fromAxisAngle(t,e){const i=e/2,n=Math.sin(i);return new S(t.x*n,t.y*n,t.z*n,Math.cos(i))}static fromEuler(t){const e=t.reunit("rad"),[i,n,s,o]="XYZ"===e.order?[0,1,2,1]:"XZY"===e.order?[0,2,1,-1]:"YXZ"===e.order?[1,0,2,-1]:"YZX"===e.order?[1,2,0,1]:"ZXY"===e.order?[2,0,1,1]:[2,1,0,-1],r=e.getComponents(),a=.5*r[i],l=.5*o*r[n],h=.5*r[s],c=Math.cos(a),d=Math.cos(l),p=Math.cos(h),u=Math.sin(a),m=Math.sin(l),_=Math.sin(h),v=[0,0,0,p*d*c+_*m*u];return v[i]=p*d*u-_*m*c,v[n]=o*(p*m*c+_*d*u),v[s]=_*d*c-p*m*u,new S(...v)}static lookRotation(t,e){const{normal:i,tangent:n,binormal:s}=t.orthoNormalize(e),o=s.x,r=n.x,a=i.x,l=s.y,h=n.y,c=i.y,d=s.z,p=n.z,u=i.z,m=o+h+u;if(m>0){const t=.5/Math.sqrt(m+1);return new S((p-c)*t,(a-d)*t,(l-r)*t,.25/t)}if(o>h&&o>u){const t=2*Math.sqrt(1+o-h-u);return new S(.25*t,(r+l)/t,(a+d)/t,(p-c)/t)}if(h>u){const t=2*Math.sqrt(1+h-o-u);return new S((r+l)/t,.25*t,(c+p)/t,(a-d)/t)}{const t=2*Math.sqrt(1+u-o-h);return new S((a+d)/t,(c+p)/t,.25*t,(l-r)/t)}}constructor(t,e,i,n){super(),this.x=null!=t?t:0,this.y=null!=e?e:0,this.z=null!=i?i:0,this.w=null!=n?n:1}get quat(){return this}getComponents(){return[this.x,this.y,this.z,this.w]}toEuler(t,e){return N.fromQuaternion(this,t,e)}get lengthSq(){return this.x*this.x+this.y*this.y+this.z*this.z+this.w*this.w}get length(){return Math.sqrt(this.lengthSq)}get normalized(){const t=this.length;return 0===t?new S:new S(this.x/t,this.y/t,this.z/t,this.w/t)}get negated(){return new S(-this.x,-this.y,-this.z,-this.w)}get ban360s(){return this.w<0?this.negated:this}multiply(t){const e=t.quat;return new S(this.w*e.x+this.x*e.w+this.y*e.z-this.z*e.y,this.w*e.y-this.x*e.z+this.y*e.w+this.z*e.x,this.w*e.z+this.x*e.y-this.y*e.x+this.z*e.w,this.w*e.w-this.x*e.x-this.y*e.y-this.z*e.z)}format(t){return t.quat}slerp(t,e){let i=t.quat;if(0===e)return this;if(1===e)return i;const n=this.ban360s;i=i.ban360s;let s=n.w*i.w+n.x*i.x+n.y*i.y+n.z*i.z;if(s<0&&(i=i.negated,s=-s),s>=1)return n;const o=1-s*s;if(o<=Number.EPSILON){const t=1-e;return new S(t*n.x+e*i.x,t*n.y+e*i.y,t*n.z+e*i.z,t*n.w+e*i.w).normalized}const r=Math.sqrt(o),a=Math.atan2(r,s),l=Math.sin((1-e)*a)/r,h=Math.sin(e*a)/r;return new S(n.x*l+i.x*h,n.y*l+i.y*h,n.z*l+i.z*h,n.w*l+i.w*h)}toMat3(){const{x:t,y:e,z:i,w:n}=this;return[1-2*e*e-2*i*i,2*t*e+2*i*n,2*t*i-2*e*n,2*t*e-2*i*n,1-2*t*t-2*i*i,2*e*i+2*t*n,2*t*i+2*e*n,2*e*i-2*t*n,1-2*t*t-2*e*e]}}class I{constructor(){this.offset=[0,0,-5],this.fov=30,this.aspect=1,this.viewport=[0,0,1,1]}project(t){const e=.5*(this.viewport[0]+this.viewport[2]),i=.5*(this.viewport[1]+this.viewport[3]),n=this.viewport[2]-this.viewport[0],s=this.viewport[3]-this.viewport[1],o=1/Math.tan(this.fov*Math.PI/360),r=-(t.z+this.offset[2]);return[e+(t.x+this.offset[0])/r*o*n*.5/this.aspect,i-(t.y+this.offset[1])/r*o*s*.5]}}class R{constructor(e,i,n){this.element=e.createElementNS(t,"path"),this.vertices=i,this.projector=n}setRotation(t){let e="";return this.vertices.forEach(((i,n)=>{const s=i.applyQuaternion(t),[o,r]=this.projector.project(s);e+=`${0===n?"M":"L"}${o} ${r}`})),this.element.setAttributeNS(null,"d",e),this}}class V{constructor(t,e,i){this.x=null!=t?t:0,this.y=null!=e?e:0,this.z=null!=i?i:0}getComponents(){return[this.x,this.y,this.z]}get lengthSq(){return this.x*this.x+this.y*this.y+this.z*this.z}get length(){return Math.sqrt(this.lengthSq)}get normalized(){const t=this.length;return 0===t?new V:new V(this.x/t,this.y/t,this.z/t)}get negated(){return new V(-this.x,-this.y,-this.z)}add(t){return new V(this.x+t.x,this.y+t.y,this.z+t.z)}sub(t){return new V(this.x-t.x,this.y-t.y,this.z-t.z)}scale(t){return new V(this.x*t,this.y*t,this.z*t)}dot(t){return this.x*t.x+this.y*t.y+this.z*t.z}cross(t){return new V(this.y*t.z-this.z*t.y,this.z*t.x-this.x*t.z,this.x*t.y-this.y*t.x)}orthoNormalize(t){const e=this.normalized;t=t.normalized;let i=e.dot(t);1===i&&(t=Math.abs(e.y)>Math.abs(e.z)?new V(0,0,1):new V(0,1,0),i=e.dot(t));const n=(t=t.sub(e.scale(i)).normalized).cross(e);return{normal:e,tangent:t,binormal:n}}applyQuaternion(t){const e=t.w*this.x+t.y*this.z-t.z*this.y,i=t.w*this.y+t.z*this.x-t.x*this.z,n=t.w*this.z+t.x*this.y-t.y*this.x,s=-t.x*this.x-t.y*this.y-t.z*this.z;return new V(e*t.w+s*-t.x+i*-t.z-n*-t.y,i*t.w+s*-t.y+n*-t.x-e*-t.z,n*t.w+s*-t.z+e*-t.y-i*-t.x)}}function X(t,e){const i=e.z>0?new S(0,0,0,1):new S(0,0,1,0);return Math.abs(t.z)>.9999?i:S.lookRotation(t,e)}function Y(t,e,i,n,s,o=1){const r=[];for(let a=0;a<i;a++){const l=t+e*a/(i-1),h=new V;h[n]=o*Math.cos(l),h[s]=o*Math.sin(l),r.push(h)}return r}const Z=e("rotationgizmo"),D=new V(0,0,0),Q=new V(1,0,0),K=new V(0,1,0),H=new V(0,0,1),$=new V(0,0,-1),U=new V(.7,0,0),O=new V(0,.7,0),T=new V(0,0,.7),G=new V(-.7,0,0),J=new V(0,-.7,0),W=new V(0,0,-.7),tt=new S(0,0,0,1);function et(e,i,n){const s=e.createElementNS(t,"g"),o=e.createElementNS(t,"circle");o.classList.add(Z(i)),o.setAttributeNS(null,"cx","0"),o.setAttributeNS(null,"cy","0"),o.setAttributeNS(null,"r","8"),s.appendChild(o);const r=e.createElementNS(t,"text");return r.classList.add(Z("labeltext")),r.setAttributeNS(null,"y","4"),r.setAttributeNS(null,"text-anchor","middle"),r.setAttributeNS(null,"font-size","10"),r.textContent=n,s.appendChild(r),s}class it{get xArcBElement(){return this.xArcBC_.element}get yArcBElement(){return this.yArcBC_.element}get zArcBElement(){return this.zArcBC_.element}get xArcFElement(){return this.xArcFC_.element}get yArcFElement(){return this.yArcFC_.element}get zArcFElement(){return this.zArcFC_.element}get rArcElement(){return this.rArcC_.element}constructor(e,i){this.onFoldableChange_=this.onFoldableChange_.bind(this),this.onValueChange_=this.onValueChange_.bind(this),this.onModeChange_=this.onModeChange_.bind(this),this.element=e.createElement("div"),this.element.classList.add(Z()),"popup"===i.pickerLayout&&this.element.classList.add(Z(void 0,"p"));const n=e.createElement("div");n.classList.add(Z("p")),i.viewProps.bindTabIndex(n),this.element.appendChild(n),this.padElement=n;const s=e.createElementNS(t,"svg");s.classList.add(Z("g")),this.padElement.appendChild(s),this.svgElem_=s,this.projector_=new I,this.projector_.viewport=[0,0,136,136];const o=Y(0,Math.PI,33,"x","y"),r=Y(0,2*Math.PI,65,"x","y",1.1);this.xArcB_=new R(e,o,this.projector_),this.xArcB_.element.classList.add(Z("arcx")),this.svgElem_.appendChild(this.xArcB_.element),this.yArcB_=new R(e,o,this.projector_),this.yArcB_.element.classList.add(Z("arcy")),this.svgElem_.appendChild(this.yArcB_.element),this.zArcB_=new R(e,o,this.projector_),this.zArcB_.element.classList.add(Z("arcz")),this.svgElem_.appendChild(this.zArcB_.element),this.xArcBC_=new R(e,o,this.projector_),this.xArcBC_.element.classList.add(Z("arcc")),this.svgElem_.appendChild(this.xArcBC_.element),this.yArcBC_=new R(e,o,this.projector_),this.yArcBC_.element.classList.add(Z("arcc")),this.svgElem_.appendChild(this.yArcBC_.element),this.zArcBC_=new R(e,o,this.projector_),this.zArcBC_.element.classList.add(Z("arcc")),this.svgElem_.appendChild(this.zArcBC_.element);const a=e.createElementNS(t,"g");s.classList.add(Z("axes")),this.svgElem_.appendChild(a),this.axesElem_=a,this.xAxis_=new R(e,[D,U],this.projector_),this.xAxis_.element.classList.add(Z("axisx")),this.axesElem_.appendChild(this.xAxis_.element),this.yAxis_=new R(e,[D,O],this.projector_),this.yAxis_.element.classList.add(Z("axisy")),this.axesElem_.appendChild(this.yAxis_.element),this.zAxis_=new R(e,[D,T],this.projector_),this.zAxis_.element.classList.add(Z("axisz")),this.axesElem_.appendChild(this.zAxis_.element),this.xnAxis_=new R(e,[D,G],this.projector_),this.xnAxis_.element.classList.add(Z("axisn")),this.axesElem_.appendChild(this.xnAxis_.element),this.ynAxis_=new R(e,[D,J],this.projector_),this.ynAxis_.element.classList.add(Z("axisn")),this.axesElem_.appendChild(this.ynAxis_.element),this.znAxis_=new R(e,[D,W],this.projector_),this.znAxis_.element.classList.add(Z("axisn")),this.axesElem_.appendChild(this.znAxis_.element),this.xArcF_=new R(e,o,this.projector_),this.xArcF_.element.classList.add(Z("arcx")),this.svgElem_.appendChild(this.xArcF_.element),this.yArcF_=new R(e,o,this.projector_),this.yArcF_.element.classList.add(Z("arcy")),this.svgElem_.appendChild(this.yArcF_.element),this.zArcF_=new R(e,o,this.projector_),this.zArcF_.element.classList.add(Z("arcz")),this.svgElem_.appendChild(this.zArcF_.element),this.xArcFC_=new R(e,o,this.projector_),this.xArcFC_.element.classList.add(Z("arcc")),this.svgElem_.appendChild(this.xArcFC_.element),this.yArcFC_=new R(e,o,this.projector_),this.yArcFC_.element.classList.add(Z("arcc")),this.svgElem_.appendChild(this.yArcFC_.element),this.zArcFC_=new R(e,o,this.projector_),this.zArcFC_.element.classList.add(Z("arcc")),this.svgElem_.appendChild(this.zArcFC_.element),this.rArc_=new R(e,r,this.projector_),this.rArc_.element.classList.add(Z("arcr")),this.rArc_.setRotation(tt),this.svgElem_.appendChild(this.rArc_.element),this.rArcC_=new R(e,r,this.projector_),this.rArcC_.element.classList.add(Z("arcc")),this.rArcC_.setRotation(tt),this.svgElem_.appendChild(this.rArcC_.element);const l=e.createElementNS(t,"g");s.classList.add(Z("labels")),this.svgElem_.appendChild(l),this.labelsElem_=l,this.xLabel=et(e,"labelcirclex","X"),this.labelsElem_.appendChild(this.xLabel),this.yLabel=et(e,"labelcircley","Y"),this.labelsElem_.appendChild(this.yLabel),this.zLabel=et(e,"labelcirclez","Z"),this.labelsElem_.appendChild(this.zLabel),this.xnLabel=et(e,"labelcirclen","-X"),this.labelsElem_.appendChild(this.xnLabel),this.ynLabel=et(e,"labelcirclen","-Y"),this.labelsElem_.appendChild(this.ynLabel),this.znLabel=et(e,"labelcirclen","-Z"),this.labelsElem_.appendChild(this.znLabel);const h=()=>{this.xArcB_.element.classList.add(Z("arcx_hover")),this.xArcF_.element.classList.add(Z("arcx_hover"))},c=()=>{this.xArcB_.element.classList.remove(Z("arcx_hover")),this.xArcF_.element.classList.remove(Z("arcx_hover"))};this.xArcBC_.element.addEventListener("mouseenter",h),this.xArcBC_.element.addEventListener("mouseleave",c),this.xArcFC_.element.addEventListener("mouseenter",h),this.xArcFC_.element.addEventListener("mouseleave",c);const d=()=>{this.yArcB_.element.classList.add(Z("arcy_hover")),this.yArcF_.element.classList.add(Z("arcy_hover"))},p=()=>{this.yArcB_.element.classList.remove(Z("arcy_hover")),this.yArcF_.element.classList.remove(Z("arcy_hover"))};this.yArcBC_.element.addEventListener("mouseenter",d),this.yArcBC_.element.addEventListener("mouseleave",p),this.yArcFC_.element.addEventListener("mouseenter",d),this.yArcFC_.element.addEventListener("mouseleave",p);const u=()=>{this.zArcB_.element.classList.add(Z("arcz_hover")),this.zArcF_.element.classList.add(Z("arcz_hover"))},m=()=>{this.zArcB_.element.classList.remove(Z("arcz_hover")),this.zArcF_.element.classList.remove(Z("arcz_hover"))};this.zArcBC_.element.addEventListener("mouseenter",u),this.zArcBC_.element.addEventListener("mouseleave",m),this.zArcFC_.element.addEventListener("mouseenter",u),this.zArcFC_.element.addEventListener("mouseleave",m);this.rArcC_.element.addEventListener("mouseenter",(()=>{this.rArc_.element.classList.add(Z("arcr_hover"))})),this.rArcC_.element.addEventListener("mouseleave",(()=>{this.rArc_.element.classList.remove(Z("arcr_hover"))})),i.value.emitter.on("change",this.onValueChange_),this.value=i.value,i.mode.emitter.on("change",this.onModeChange_),this.mode_=i.mode,this.update_()}get allFocusableElements(){return[this.padElement]}update_(){const t=this.value.rawValue.quat.normalized;this.xAxis_.setRotation(t),this.yAxis_.setRotation(t),this.zAxis_.setRotation(t),this.xnAxis_.setRotation(t),this.ynAxis_.setRotation(t),this.znAxis_.setRotation(t);const e=Q.applyQuaternion(t),i=K.applyQuaternion(t),n=H.applyQuaternion(t),s=e.negated,o=i.negated,r=n.negated;[{el:this.xAxis_.element,v:e},{el:this.yAxis_.element,v:i},{el:this.zAxis_.element,v:n},{el:this.xnAxis_.element,v:s},{el:this.ynAxis_.element,v:o},{el:this.znAxis_.element,v:r}].map((({el:t,v:e})=>(this.axesElem_.removeChild(t),{el:t,v:e}))).sort(((t,e)=>t.v.z-e.v.z)).forEach((({el:t})=>{this.axesElem_.appendChild(t)})),this.xArcB_.setRotation(X(e,$)),this.yArcB_.setRotation(X(i,$)),this.zArcB_.setRotation(X(n,$)),this.xArcBC_.setRotation(X(e,$)),this.yArcBC_.setRotation(X(i,$)),this.zArcBC_.setRotation(X(n,$)),this.xArcF_.setRotation(X(e,H)),this.yArcF_.setRotation(X(i,H)),this.zArcF_.setRotation(X(n,H)),this.xArcFC_.setRotation(X(e,H)),this.yArcFC_.setRotation(X(i,H)),this.zArcFC_.setRotation(X(n,H)),[{el:this.xLabel,v:U},{el:this.yLabel,v:O},{el:this.zLabel,v:T},{el:this.xnLabel,v:G},{el:this.ynLabel,v:J},{el:this.znLabel,v:W}].forEach((({el:e,v:i})=>{const[n,s]=this.projector_.project(i.applyQuaternion(t));e.setAttributeNS(null,"transform",`translate( ${n}, ${s} )`)})),[{el:this.xLabel,v:e},{el:this.yLabel,v:i},{el:this.zLabel,v:n},{el:this.xnLabel,v:s},{el:this.ynLabel,v:o},{el:this.znLabel,v:r}].map((({el:t,v:e})=>(this.labelsElem_.removeChild(t),{el:t,v:e}))).sort(((t,e)=>t.v.z-e.v.z)).forEach((({el:t})=>{this.labelsElem_.appendChild(t)}))}onValueChange_(){this.update_()}onFoldableChange_(){this.update_()}onModeChange_(){const t=this.mode_.rawValue,e="angle-x"===t?"add":"remove",i="angle-y"===t?"add":"remove",n="angle-z"===t?"add":"remove",s="angle-r"===t?"add":"remove";this.xArcB_.element.classList[e](Z("arcx_active")),this.yArcB_.element.classList[i](Z("arcy_active")),this.zArcB_.element.classList[n](Z("arcz_active")),this.xArcF_.element.classList[e](Z("arcx_active")),this.yArcF_.element.classList[i](Z("arcy_active")),this.zArcF_.element.classList[n](Z("arcz_active")),this.rArc_.element.classList[s](Z("arcr_active"))}}function nt(t){return F(t,0,1)}const st=1/Math.sqrt(2),ot=new V(1,0,0),rt=new V(0,1,0),at=new V(0,0,1),lt=new S(0,0,0,1),ht=new S(st,0,0,st),ct=new S(0,-st,0,st),dt=new S(-st,0,0,st),pt=new S(0,st,0,st),ut=new S(0,1,0,0);class mt{constructor(t,e){this.onPadKeyDown_=this.onPadKeyDown_.bind(this),this.onPointerDown_=this.onPointerDown_.bind(this),this.onPointerMove_=this.onPointerMove_.bind(this),this.onPointerUp_=this.onPointerUp_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.mode_=i("free"),this.view=new it(t,{value:this.value,mode:this.mode_,viewProps:this.viewProps,pickerLayout:e.pickerLayout}),this.ptHandler_=new n(this.view.padElement),this.ptHandler_.emitter.on("down",this.onPointerDown_),this.ptHandler_.emitter.on("move",this.onPointerMove_),this.ptHandler_.emitter.on("up",this.onPointerUp_),this.view.padElement.addEventListener("keydown",this.onPadKeyDown_);const s=new n(this.view.xArcBElement);s.emitter.on("down",(()=>this.changeModeIfNotAuto_("angle-x"))),s.emitter.on("up",(()=>this.changeModeIfNotAuto_("free")));const o=new n(this.view.xArcFElement);o.emitter.on("down",(()=>this.changeModeIfNotAuto_("angle-x"))),o.emitter.on("up",(()=>this.changeModeIfNotAuto_("free")));const r=new n(this.view.yArcBElement);r.emitter.on("down",(()=>this.changeModeIfNotAuto_("angle-y"))),r.emitter.on("up",(()=>this.changeModeIfNotAuto_("free")));const a=new n(this.view.yArcFElement);a.emitter.on("down",(()=>this.changeModeIfNotAuto_("angle-y"))),a.emitter.on("up",(()=>this.changeModeIfNotAuto_("free")));const l=new n(this.view.zArcBElement);l.emitter.on("down",(()=>this.changeModeIfNotAuto_("angle-z"))),l.emitter.on("up",(()=>this.changeModeIfNotAuto_("free")));const h=new n(this.view.zArcFElement);h.emitter.on("down",(()=>this.changeModeIfNotAuto_("angle-z"))),h.emitter.on("up",(()=>this.changeModeIfNotAuto_("free")));const c=new n(this.view.rArcElement);c.emitter.on("down",(()=>this.changeModeIfNotAuto_("angle-r"))),c.emitter.on("up",(()=>this.changeModeIfNotAuto_("free"))),[{el:this.view.xLabel,q:ct},{el:this.view.yLabel,q:ht},{el:this.view.zLabel,q:lt},{el:this.view.xnLabel,q:pt},{el:this.view.ynLabel,q:dt},{el:this.view.znLabel,q:ut}].forEach((({el:t,q:e})=>{new n(t).emitter.on("down",(()=>this.autoRotate_(e)))})),this.px_=null,this.py_=null,this.angleState_=null}handlePointerEvent_(t){if(!t.point)return;const e=this.mode_.rawValue,i=t.point.x,n=t.point.y;if("auto"===e);else if("free"===e){if(null!=this.px_&&null!=this.py_){const t=i-this.px_,e=n-this.py_,s=Math.sqrt(t*t+e*e);if(0===s)return;const o=new V(e/s,t/s,0),r=S.fromAxisAngle(o,s/68);this.value.rawValue=this.value.rawValue.premultiply(r)}this.px_=i,this.py_=n}else if("angle-r"===e){const e=t.bounds.width/2,s=t.bounds.height/2,o=Math.atan2(n-s,i-e);if(null==this.angleState_){const t=new V(0,0,1);this.angleState_={initialRotation:this.value.rawValue,initialAngle:o,axis:t,reverseAngle:!0}}else{const{initialRotation:t,initialAngle:e,axis:i}=this.angleState_,n=-j(o-e),s=S.fromAxisAngle(i,n);this.value.rawValue=t.premultiply(s)}}else{const s=t.bounds.width/2,o=t.bounds.height/2,r=Math.atan2(n-o,i-s);if(null==this.angleState_){const t="angle-x"===e?ot:"angle-y"===e?rt:at,i=t.applyQuaternion(this.value.rawValue.quat).z>0;this.angleState_={initialRotation:this.value.rawValue,initialAngle:r,axis:t,reverseAngle:i}}else{const{initialRotation:t,initialAngle:e,axis:i,reverseAngle:n}=this.angleState_;let s=j(r-e);s=n?-s:s;const o=S.fromAxisAngle(i,s);this.value.rawValue=t.multiply(o)}}}onPointerDown_(t){this.handlePointerEvent_(t.data)}onPointerMove_(t){this.handlePointerEvent_(t.data)}onPointerUp_(){this.px_=null,this.py_=null,this.angleState_=null}onPadKeyDown_(t){s(t.key)&&t.preventDefault();const e=o(1,r(t)),i=o(1,a(t));if(0!==e||0!==i){const t=new V(-i,e,0),n=S.fromAxisAngle(t,Math.PI/16);this.value.rawValue=this.value.rawValue.premultiply(n)}}changeModeIfNotAuto_(t){"auto"!==this.mode_.rawValue&&(this.mode_.rawValue=t)}autoRotate_(t){this.mode_.rawValue="auto";const e=this.value.rawValue,i=Date.now(),n=()=>{const s=Date.now(),o=function(t){if(t<=0)return 0;if(t>=1)return 1;const e=1-t;return nt(1-e*(e*(e*(e*(e*(e*(-6*e+7)))))))}(nt((s-i-(r=0))/(300-r)));var r;this.value.rawValue=e.slerp(t,o),1!==o?requestAnimationFrame(n):this.mode_.rawValue="free"};requestAnimationFrame(n)}}const _t=e("rotationswatch"),vt=new V(1,0,0),wt=new V(0,1,0),xt=new V(0,0,1),gt=new S(0,0,0,1);class yt{constructor(e,i){this.onValueChange_=this.onValueChange_.bind(this),i.value.emitter.on("change",this.onValueChange_),this.value=i.value,this.element=e.createElement("div"),this.element.classList.add(_t()),i.viewProps.bindClassModifiers(this.element);const n=e.createElement("button");n.classList.add(_t("b")),i.viewProps.bindDisabled(n),this.element.appendChild(n),this.buttonElement=n;const s=e.createElementNS(t,"svg");s.classList.add(_t("g")),n.appendChild(s),this.svgElem_=s,this.projector_=new I,this.projector_.viewport=[0,0,20,20];const o=Y(0,Math.PI,33,"x","y"),r=Y(0,2*Math.PI,65,"x","y");this.rArc_=new R(e,r,this.projector_),this.rArc_.element.classList.add(_t("arcr")),s.appendChild(this.rArc_.element),this.rArc_.setRotation(gt),this.xArc_=new R(e,o,this.projector_),this.xArc_.element.classList.add(_t("arc")),s.appendChild(this.xArc_.element),this.yArc_=new R(e,o,this.projector_),this.yArc_.element.classList.add(_t("arc")),s.appendChild(this.yArc_.element),this.zArc_=new R(e,o,this.projector_),this.zArc_.element.classList.add(_t("arc")),s.appendChild(this.zArc_.element),this.update_()}update_(){const t=this.value.rawValue.quat.normalized,e=vt.applyQuaternion(t),i=wt.applyQuaternion(t),n=xt.applyQuaternion(t);this.xArc_.setRotation(X(e,xt)),this.yArc_.setRotation(X(i,xt)),this.zArc_.setRotation(X(n,xt))}onValueChange_(){this.update_()}}class zt{constructor(t,e){this.value=e.value,this.viewProps=e.viewProps,this.view=new yt(t,{value:this.value,viewProps:this.viewProps})}}const bt=e("rotation");class At{constructor(t,e){this.element=t.createElement("div"),this.element.classList.add(bt()),e.foldable.bindExpandedClass(this.element,bt(void 0,"expanded")),l(e.foldable,"completed",h(this.element,bt(void 0,"cpl"))),"quaternion"===e.rotationMode&&this.element.classList.add(bt("quat"));const i=t.createElement("div");i.classList.add(bt("h")),this.element.appendChild(i);const n=t.createElement("div");n.classList.add(bt("s")),i.appendChild(n),this.swatchElement=n;const s=t.createElement("div");if(s.classList.add(bt("t")),i.appendChild(s),this.textElement=s,"inline"===e.pickerLayout){const e=t.createElement("div");e.classList.add(bt("g")),this.element.appendChild(e),this.pickerElement=e}else this.pickerElement=null}}class ft{constructor(t,e){this.onButtonBlur_=this.onButtonBlur_.bind(this),this.onButtonClick_=this.onButtonClick_.bind(this),this.onPopupChildBlur_=this.onPopupChildBlur_.bind(this),this.onPopupChildKeydown_=this.onPopupChildKeydown_.bind(this),this.value=e.value,this.viewProps=e.viewProps,this.foldable_=c.create(e.expanded),this.swatchC_=new zt(t,{value:this.value,viewProps:this.viewProps});const i=this.swatchC_.view.buttonElement;i.addEventListener("blur",this.onButtonBlur_),i.addEventListener("click",this.onButtonClick_),this.textC_=new d(t,{assembly:e.assembly,axes:e.axes,parser:e.parser,value:this.value,viewProps:this.viewProps}),this.view=new At(t,{rotationMode:e.rotationMode,foldable:this.foldable_,pickerLayout:e.pickerLayout}),this.view.swatchElement.appendChild(this.swatchC_.view.element),this.view.textElement.appendChild(this.textC_.view.element),this.popC_="popup"===e.pickerLayout?new p(t,{viewProps:this.viewProps}):null;const n=new mt(t,{value:this.value,viewProps:this.viewProps,pickerLayout:e.pickerLayout});n.view.allFocusableElements.forEach((t=>{t.addEventListener("blur",this.onPopupChildBlur_),t.addEventListener("keydown",this.onPopupChildKeydown_)})),this.gizmoC_=n,this.popC_?(this.view.element.appendChild(this.popC_.view.element),this.popC_.view.element.appendChild(n.view.element),u({primary:this.foldable_.value("expanded"),secondary:this.popC_.shows,forward:t=>t,backward:(t,e)=>e})):this.view.pickerElement&&(this.view.pickerElement.appendChild(this.gizmoC_.view.element),m(this.foldable_,this.view.pickerElement))}onButtonBlur_(t){if(!this.popC_)return;const e=this.view.element,i=_(t.relatedTarget);i&&e.contains(i)||(this.popC_.shows.rawValue=!1)}onButtonClick_(){this.foldable_.set("expanded",!this.foldable_.get("expanded")),this.foldable_.get("expanded")&&this.gizmoC_.view.allFocusableElements[0].focus()}onPopupChildBlur_(t){if(!this.popC_)return;const e=this.popC_.view.element,i=v(t);i&&e.contains(i)||i&&i===this.swatchC_.view.buttonElement&&!w(e.ownerDocument)||(this.popC_.shows.rawValue=!1)}onPopupChildKeydown_(t){this.popC_?"Escape"===t.key&&(this.popC_.shows.rawValue=!1):this.view.pickerElement&&"Escape"===t.key&&this.swatchC_.view.buttonElement.focus()}}function Ct(t,e){const i=Math.pow(.1,t);return{baseStep:i,constraint:e,textProps:x.fromObject({formatter:g(t),keyScale:i,pointerScale:i})}}function Et(t){if(!t)return;const e=[];return y(t.step)||e.push(new z(t.step)),y(t.max)&&y(t.min)||e.push(new b({max:t.max,min:t.min})),new A(e)}function Lt(t,e){return{toComponents:t=>t.getComponents(),fromComponents:i=>new N(i[0],i[1],i[2],t,e)}}function Mt(t,e,i){return"number"==typeof(null==t?void 0:t.x)&&"number"==typeof(null==t?void 0:t.y)&&"number"==typeof(null==t?void 0:t.z)?new N(t.x,t.y,t.z,e,i):new N(0,0,0,e,i)}function kt(t){switch(t){case"XYZ":case"XZY":case"YXZ":case"YZX":case"ZXY":case"ZYX":return t;default:return}}function Pt(t){switch(t){case"rad":case"deg":case"turn":return t;default:return}}const Bt=f({id:"rotation",type:"input",accept(t,e){var i,n;const s=M(e,(t=>({view:t.required.constant("rotation"),label:t.optional.string,picker:t.optional.custom(P),expanded:t.optional.boolean,rotationMode:t.required.constant("euler"),x:t.optional.custom(k),y:t.optional.custom(k),z:t.optional.custom(k),order:t.optional.custom(kt),unit:t.optional.custom(Pt)})));return s?{initialValue:Mt(t,null!==(i=s.order)&&void 0!==i?i:"XYZ",null!==(n=s.unit)&&void 0!==n?n:"rad"),params:s}:null},binding:{reader:({params:t})=>e=>{var i,n;return Mt(e,null!==(i=t.order)&&void 0!==i?i:"XYZ",null!==(n=t.unit)&&void 0!==n?n:"rad")},constraint({params:t}){var e,i;return new C({assembly:Lt(null!==(e=t.order)&&void 0!==e?e:"XYZ",null!==(i=t.unit)&&void 0!==i?i:"rad"),components:[Et("x"in t?t.x:void 0),Et("y"in t?t.y:void 0),Et("z"in t?t.z:void 0)]})},writer:t=>(t,e)=>{t.writeProperty("x",e.x),t.writeProperty("y",e.y),t.writeProperty("z",e.z)}},controller({document:t,value:e,constraint:i,params:n,viewProps:s}){var o,r;if(!(i instanceof C))throw E.shouldNeverHappen();const a="expanded"in n?n.expanded:void 0,l="picker"in n?n.picker:void 0,h=null!==(o=n.unit)&&void 0!==o?o:"rad",c={rad:2,deg:0,turn:2}[h];return new ft(t,{axes:[Ct(c,i.components[0]),Ct(c,i.components[1]),Ct(c,i.components[2])],assembly:Lt(null!==(r=n.order)&&void 0!==r?r:"XYZ",h),rotationMode:"euler",expanded:null!=a&&a,parser:L,pickerLayout:null!=l?l:"popup",value:e,viewProps:s})}}),Ft={toComponents:t=>[t.x,t.y,t.z,t.w],fromComponents:t=>new S(t[0],t[1],t[2],t[3])};function qt(t){return{baseStep:.01,constraint:t,textProps:x.fromObject({formatter:t=>Math.abs(t)<.995?t.toFixed(2).replace("0.","."):t.toFixed(1),keyScale:.01,pointerScale:.01})}}function jt(t){return"number"==typeof(null==t?void 0:t.x)&&"number"==typeof(null==t?void 0:t.y)&&"number"==typeof(null==t?void 0:t.z)&&"number"==typeof(null==t?void 0:t.w)?new S(t.x,t.y,t.z,t.w):new S(0,0,0,1)}const Nt=f({id:"rotation",type:"input",accept(t,e){const i=M(e,(t=>({view:t.required.constant("rotation"),label:t.optional.string,picker:t.optional.custom(P),expanded:t.optional.boolean,rotationMode:t.optional.constant("quaternion"),x:t.optional.custom(k),y:t.optional.custom(k),z:t.optional.custom(k),w:t.optional.custom(k)})));return i?{initialValue:jt(t),params:i}:null},binding:{reader:t=>t=>jt(t),constraint:({params:t})=>new C({assembly:Ft,components:[Et("x"in t?t.x:void 0),Et("y"in t?t.y:void 0),Et("z"in t?t.z:void 0),Et("w"in t?t.w:void 0)]}),writer:t=>(t,e)=>{t.writeProperty("x",e.x),t.writeProperty("y",e.y),t.writeProperty("z",e.z),t.writeProperty("w",e.w)}},controller({document:t,value:e,constraint:i,params:n,viewProps:s}){if(!(i instanceof C))throw E.shouldNeverHappen();const o="expanded"in n?n.expanded:void 0,r="picker"in n?n.picker:void 0;return new ft(t,{axes:[qt(i.components[0]),qt(i.components[1]),qt(i.components[2]),qt(i.components[3])],assembly:Ft,rotationMode:"quaternion",expanded:null!=o&&o,parser:L,pickerLayout:null!=r?r:"popup",value:e,viewProps:s})}}),St="rotation",It=".tp-rotationgizmov_p,.tp-rotationswatchv_b{-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:rgba(0,0,0,0);border-width:0;font-family:inherit;font-size:inherit;font-weight:inherit;margin:0;outline:none;padding:0}.tp-rotationswatchv_b{background-color:var(--btn-bg);border-radius:var(--bld-br);color:var(--btn-fg);cursor:pointer;display:block;font-weight:bold;height:var(--cnt-usz);line-height:var(--cnt-usz);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tp-rotationswatchv_b:hover{background-color:var(--btn-bg-h)}.tp-rotationswatchv_b:focus{background-color:var(--btn-bg-f)}.tp-rotationswatchv_b:active{background-color:var(--btn-bg-a)}.tp-rotationswatchv_b:disabled{opacity:.5}.tp-rotationgizmov_p{background-color:var(--in-bg);border-radius:var(--bld-br);box-sizing:border-box;color:var(--in-fg);font-family:inherit;height:var(--cnt-usz);line-height:var(--cnt-usz);min-width:0;width:100%}.tp-rotationgizmov_p:hover{background-color:var(--in-bg-h)}.tp-rotationgizmov_p:focus{background-color:var(--in-bg-f)}.tp-rotationgizmov_p:active{background-color:var(--in-bg-a)}.tp-rotationgizmov_p:disabled{opacity:.5}.tp-rotationv{position:relative}.tp-rotationv_quat .tp-txtv_i{padding-left:0}.tp-rotationv_root{background-color:var(--mo-bg);width:100%;height:calc(2*var(--cnt-usz))}.tp-rotationv_h{display:flex}.tp-rotationv_s{flex-grow:0;flex-shrink:0;width:var(--cnt-usz);margin-right:4px}.tp-rotationv_g{height:0;margin-top:0;opacity:0;overflow:hidden;transition:height .2s ease-in-out,opacity .2s linear,margin .2s ease-in-out}.tp-rotationv.tp-rotationv-expanded .tp-rotationv_g{margin-top:var(--cnt-usp);opacity:1}.tp-rotationv .tp-popv{left:calc(-1*var(--cnt-hp));right:calc(-1*var(--cnt-hp));top:var(--cnt-usz)}.tp-rotationswatchv path{stroke-linecap:round;stroke-linejoin:round}.tp-rotationswatchv_b{height:var(--cnt-usz);margin-right:4px;position:relative;width:var(--cnt-usz)}.tp-rotationswatchv_arc{fill:none;stroke:var(--btn-bg);stroke-width:1px}.tp-rotationswatchv_arcr{fill:var(--btn-fg);stroke:var(--btn-bg);stroke-width:1px}.tp-rotationgizmov{padding-left:calc(var(--cnt-usz) + 4px)}.tp-rotationgizmov path{stroke-linecap:round;stroke-linejoin:round}.tp-rotationgizmov_p{cursor:move;height:0;overflow:hidden;padding-bottom:100%;position:relative}.tp-rotationgizmov_g{display:block;height:100%;left:0;pointer-events:none;position:absolute;top:0;width:100%}.tp-rotationgizmov_axisx{stroke:#eb103f;stroke-width:2px}.tp-rotationgizmov_axisy{stroke:#4eeb10;stroke-width:2px}.tp-rotationgizmov_axisz{stroke:#1068eb;stroke-width:2px}.tp-rotationgizmov_axisn{stroke:var(--in-fg);stroke-width:2px}.tp-rotationgizmov_arcx{fill:none;stroke:var(--in-fg)}.tp-rotationgizmov_arcx.tp-rotationgizmov_arcx_hover{stroke:#eb103f}.tp-rotationgizmov_arcx.tp-rotationgizmov_arcx_active{stroke:#eb103f;stroke-width:2px}.tp-rotationgizmov_arcy{fill:none;stroke:var(--in-fg)}.tp-rotationgizmov_arcy.tp-rotationgizmov_arcy_hover{stroke:#4eeb10}.tp-rotationgizmov_arcy.tp-rotationgizmov_arcy_active{stroke:#4eeb10;stroke-width:2px}.tp-rotationgizmov_arcz{fill:none;stroke:var(--in-fg)}.tp-rotationgizmov_arcz.tp-rotationgizmov_arcz_hover{stroke:#1068eb}.tp-rotationgizmov_arcz.tp-rotationgizmov_arcz_active{stroke:#1068eb;stroke-width:2px}.tp-rotationgizmov_arcr{fill:none;stroke:var(--in-fg)}.tp-rotationgizmov_arcr.tp-rotationgizmov_arcr_hover{stroke:#ebd510}.tp-rotationgizmov_arcr.tp-rotationgizmov_arcr_active{stroke:#ebd510;stroke-width:2px}.tp-rotationgizmov_arcc{fill:none;stroke:rgba(0,0,0,0);stroke-width:5px;pointer-events:auto}.tp-rotationgizmov_labelcirclex{fill:#eb103f;cursor:pointer;pointer-events:auto}.tp-rotationgizmov_labelcirclex:hover{opacity:.7}.tp-rotationgizmov_labelcircley{fill:#4eeb10;cursor:pointer;pointer-events:auto}.tp-rotationgizmov_labelcircley:hover{opacity:.7}.tp-rotationgizmov_labelcirclez{fill:#1068eb;cursor:pointer;pointer-events:auto}.tp-rotationgizmov_labelcirclez:hover{opacity:.7}.tp-rotationgizmov_labelcirclen{fill:var(--in-fg);cursor:pointer;pointer-events:auto}.tp-rotationgizmov_labelcirclen:hover{opacity:.7}.tp-rotationgizmov_labeltext{fill:var(--btn-fg);stroke:var(--btn-fg);stroke-width:1px}.tp-rotationgizmov_p:focus .tp-rotationgizmov_m{background-color:var(--in-fg);border-width:0}",Rt=[Bt,Nt];export{Bt as RotationInputPluginEuler,Nt as RotationInputPluginQuaternion,It as css,St as id,Rt as plugins};