@tomorrowevening/hermes
Version:
An extendable set of Web Tools controlled via a separate window for non-intereference with content.
2 lines (1 loc) • 3.14 kB
JavaScript
"use strict";const a=require("react/jsx-runtime"),u=require("react"),m=require("../../../utils/math.cjs"),f=require("./utils/DragNumber.cjs"),d=require("../../utils.cjs");function Y(t){const j=u.useRef(null),b=u.useRef(null),v=u.useRef(null),h=u.useRef(null),y=u.useRef(null),g=u.useRef(null),N=u.useRef(null),C=u.useRef(null),M=u.useRef(null),p=u.useRef(null),[s,o]=u.useState(t.value.x),[l,c]=u.useState(t.value.y),[e,r]=u.useState({min:Math.min(t.min,Math.min(t.value.x,t.value.y)),max:Math.max(t.max,Math.max(t.value.x,t.value.y))}),[E,w]=u.useState(!1);f({label:N,input:j,defaultValue:s,min:e.min,max:e.max,step:.01,onChange:n=>{o(n),t.onChange({target:{value:{x:n,y:l}}})}}),f({label:C,input:b,defaultValue:l,min:e.min,max:e.max,step:.01,onChange:n=>{c(n),t.onChange({target:{value:{x:s,y:n}}})}}),f({label:M,input:v,defaultValue:e.min,min:e.min-1,max:e.max+1,step:.01,onChange:n=>{r({min:n,max:e.max})}}),f({label:p,input:h,defaultValue:e.max,min:e.min-1,max:e.max+1,step:.01,onChange:n=>{r({min:e.min,max:n})}});function I(){E||(window.addEventListener("mousemove",D),window.addEventListener("mouseup",R),w(!0))}function R(){window.removeEventListener("mousemove",D),window.removeEventListener("mouseup",R),w(!1)}function D(n){const i=y.current.getBoundingClientRect(),B=m.clamp(0,99,n.clientX-i.left)/99,X=1-m.clamp(0,99,n.clientY-i.top)/99,L=m.roundTo(m.mix(e.min,e.max,B),3),q=m.roundTo(m.mix(e.min,e.max,X),3);t.onChange({target:{value:{x:L,y:q}}}),o(L),c(q)}function V(){const n=Number(v.current.value);r({min:n,max:e.max}),s<n&&o(m.clamp(n,e.max,s)),l<n&&c(m.clamp(n,e.max,l))}function S(){const n=Number(h.current.value);r({min:e.min,max:n}),s>n&&o(m.clamp(e.min,n,s)),l>n&&c(m.clamp(e.min,n,l))}u.useEffect(()=>{g.current.style.left=`${m.normalize(e.min,e.max,s)*100}%`,g.current.style.top=`${(1-m.normalize(e.min,e.max,l))*100}%`},[e,s,l]);const x=t.step!==void 0?t.step:.01;return a.jsxs("div",{className:"vector2",children:[a.jsxs("div",{className:"fields",children:[a.jsxs("div",{children:[a.jsx("span",{ref:N,children:"X"}),a.jsx("input",{ref:j,type:"number",value:s,min:e.min,max:e.max,step:x,name:d.randomID(),onChange:n=>{if(o(n.target.value),n.target.value.length===0)return;const i=Number(n.target.value);isNaN(i)||(t.onChange({target:{value:{x:i,y:l}}}),i<e.min&&r({min:i,max:e.max}))}})]}),a.jsxs("div",{children:[a.jsx("span",{ref:C,children:"Y"}),a.jsx("input",{ref:b,type:"number",value:l,min:e.min,max:e.max,step:x,name:d.randomID(),onChange:n=>{if(c(n.target.value),n.target.value.length===0)return;const i=Number(n.target.value);isNaN(i)||(t.onChange({target:{value:{x:s,y:i}}}),i>e.max&&r({min:e.min,max:i}))}})]}),a.jsxs("div",{children:[a.jsx("span",{ref:M,children:"Min"}),a.jsx("input",{ref:v,type:"number",value:e.min,step:x,name:d.randomID(),onChange:V})]}),a.jsxs("div",{children:[a.jsx("span",{ref:p,children:"Max"}),a.jsx("input",{ref:h,type:"number",value:e.max,step:x,name:d.randomID(),onChange:S})]})]}),a.jsxs("div",{className:"input",ref:y,onMouseDown:I,onMouseUp:R,children:[a.jsx("div",{className:"x"}),a.jsx("div",{className:"y"}),a.jsx("div",{className:"pt",ref:g})]})]})}module.exports=Y;