react-wheel-menu/dist/index.cjs

React components & hooks for building a radial wheel menu

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react"),K=require("react-use-rect"),m=require("react/jsx-runtime"),g=require("clsx");function T(t){if(typeof t=="number")return t;if(t.endsWith("deg"))return d(t,"deg");if(t.endsWith("grad"))return d(t,"grad")*.9;if(t.endsWith("rad"))return d(t,"rad")*180/Math.PI;if(t.endsWith("turn"))return d(t,"turn")*360;if(t.endsWith("%"))return d(t,"%")*360/100;throw new Error(`angle must have a unit in [${z}], but was: ${t}`)}const G=["deg","grad","rad","turn","%"],z=G.join(", ");function d(t,e){return Number(t.substring(0,t.length-e.length))}function V(t,e){return t===0?0:t===e?t:(t%e+e)%e}const H=360;function p(t){return V(t,H)}function U(t,e,n,s){const r=n-t,o=s-e;return Math.atan2(o,r)}function Q(t){const e=t.x+t.width/2,n=t.y+t.height/2;return[e,n]}function Z(t){const[e,n]=l.useState(null),s=l.useCallback(a=>{n(Q(a))},[]),[r,o]=K.useRect(s,t);return{midpoint:e,setElement:r,revalidate:o}}function tt(){const[t,e]=l.useState(0),[n,s]=l.useState(0);return l.useEffect(()=>{if(!(typeof window>"u")){let r=function(o){e(o.x),s(o.y)};return window.addEventListener("mousemove",r),function(){window.removeEventListener("mousemove",r)}}},[]),[t,n]}function et(){const t=tt(),{midpoint:e,setElement:n}=Z();if(e===null)return{ref:n,angle:null};{const[s,r]=e,[o,a]=t;return{ref:n,angle:U(s,r,o,a)}}}const nt=["start","center","end"],$="center",E=0,st=["downwards","upwards","inwards","outwards","clockwise","counterclockwise"],A="downwards";function x(t,e){switch(e){case"downwards":return-t;case"upwards":return 180-t;case"inwards":return 0;case"outwards":return 180;case"clockwise":return 270;case"counterclockwise":return 90}}function F(t,e=A,n=E,s){const r=rt(n),o=ot(e,t),a=[r,o];return s!==void 0&&a.push(s),a.filter(ut).join(" ")}function rt(t){return t===0||t===""?"":`translateY(${at(t)})`}function ot(t,e){const n=x(e,t);return n===0?"":`rotate(${n}deg)`}function at(t,e="px"){return typeof t=="number"?`${t}${e}`:t}function ut(t){return t.length>0}const N={from:0,to:0,magnitude:0},h=l.createContext(N);function y(){return l.useContext(h)}const w={angle:0},I=l.createContext(w);function D(){return l.useContext(I)}function ct(){const t=y(),e=D();return t!==N?it(t):e!==w?e.angle:0}function it(t){const{from:e,magnitude:n}=t;return e+n/2}function C(t){const{className:e,style:n,orient:s=A,justify:r=$,offset:o=E}=t,a=ct(),u=g.clsx(e,"wheel-label",`wheel-label--${r}`),c={...n,transform:F(a,s,o,n?.transform)};return{className:u,style:c}}function lt(t){const{as:e="span",className:n,style:s,orient:r,justify:o,offset:a,...u}=t,c=C({className:n,style:s,orient:r,justify:o,offset:a});return m.jsx(e,{...c,...u})}const ft=["horizontal","vertical"],P="vertical",mt=["start","center","end"],k="center",dt="translateX(-50%)",pt="translateY(50%)";function v(t,e){if(t===0)return e;{const n=gt(t),s=St(t),r=[dt,n,s,pt];return e!==void 0&&r.push(e),r.filter(Tt).join(" ")}}function gt(t){const e=-(t-90);return e===0?"":`skew(${e}deg)`}function St(t){const e=90-t/2;return e===0?"":`rotate(${e}deg)`}function Tt(t){return t.length>0}function b(t){const{className:e,style:n,direction:s=P,justify:r=k}=t,{magnitude:o}=y(),a=g.clsx(e,"wheel-layout",`wheel-layout--${s}`,`wheel-layout--${r}`),u={...n,transform:v(o,n?.transform)};return{className:a,style:u}}function Lt(t){const{as:e="span",className:n,style:s,direction:r,justify:o,...a}=t,u=b({className:n,style:s,direction:r,justify:o});return m.jsx(e,{...u,...a})}function Y(t,e){const{from:n,magnitude:s,gapBefore:r,gapAfter:o}=t,a=Et(n,s),u=At(s),c=Nt(r,o),i=[a,u,c];return e!==void 0&&i.push(e),i.filter(ht).join(" ")}function Et(t,e){const n=t+e-90;return n===0?"":`rotate(${n}deg)`}function At(t){const e=t-90;return e===0?"":`skew(${e}deg)`}function Nt(t,e){if(t!==void 0&&e!==void 0){const n=S(t),s=S(e);return`translate(${n}, -${s})`}else return t!==void 0?`translateX(${S(t)})`:e!==void 0?`translateY(-${S(e)})`:""}function S(t,e="px"){return typeof t=="number"?`${t}${e}`:t}function ht(t){return t.length>0}function j(t){const{className:e,style:n,from:s,to:r,gapBefore:o,gapAfter:a}=t,u=T(s),c=T(r),i=p(u),f=p(c),L=p(c-u),J=Math.min(150,L),O={from:i,to:f,magnitude:J,gapBefore:o,gapAfter:a},X=g.clsx(e,"wheel-segment"),q={...n,transform:Y(O,n?.transform)};return{state:O,className:X,style:q}}function yt(t){const{as:e="div",className:n,style:s,from:r,to:o,gapBefore:a,gapAfter:u,children:c,...i}=t,{state:f,...L}=j({className:n,style:s,from:r,to:o,gapBefore:a,gapAfter:u});return m.jsx(e,{...L,...i,children:m.jsx(h.Provider,{value:f,children:c})})}const B="center",_=0;function M(t,e=_,n){const s=wt(t),r=It(e),o=[s,r];return n!==void 0&&o.push(n),o.filter(Ot).join(" ")}function wt(t){return t===0?"":`rotate(${t}deg)`}function It(t){return t===0||t===""?"":`translateY(${_t(t)})`}function _t(t,e="px"){return typeof t=="number"?`${t}${e}`:t}function Ot(t){return t.length>0}function R(t){const{className:e,style:n,angle:s,align:r=B,offset:o=_}=t,a=T(s),u=p(a),c={angle:u},i=g.clsx(e,"wheel-spoke",`wheel-spoke--${r}`),f={...n,transform:M(u,o,n?.transform)};return{state:c,className:i,style:f}}function Ut(t){const{as:e="span",className:n,style:s,angle:r,align:o,offset:a,children:u,...c}=t,{state:i,...f}=R({className:n,style:s,angle:r,align:o,offset:a});return m.jsx(e,{...f,...c,children:m.jsx(I.Provider,{value:i,children:u})})}function W(t){const{className:e}=t;return{className:g.clsx(e,"wheel")}}function $t(t){const{as:e="div",className:n,...s}=t,r=W({className:n});return m.jsx(e,{...r,...s})}exports.DEFAULT_LABEL_JUSTIFICATION=$;exports.DEFAULT_LABEL_OFFSET=E;exports.DEFAULT_LABEL_ORIENTATION=A;exports.DEFAULT_LAYOUT_DIRECTION=P;exports.DEFAULT_LAYOUT_JUSTIFICATION=k;exports.DEFAULT_SPOKE_ALIGNMENT=B;exports.DEFAULT_SPOKE_OFFSET=_;exports.DefaultSegmentState=N;exports.DefaultSpokeState=w;exports.LABEL_JUSTIFICATIONS=nt;exports.LABEL_ORIENTATIONS=st;exports.LAYOUT_DIRECTIONS=ft;exports.LAYOUT_JUSTIFICATIONS=mt;exports.Label=lt;exports.Layout=Lt;exports.Segment=yt;exports.SegmentStateContext=h;exports.Spoke=Ut;exports.SpokeStateContext=I;exports.Wheel=$t;exports.angleToDegrees=T;exports.moduloDegrees=p;exports.radiansBetween=U;exports.rotateLabel=x;exports.transformLabel=F;exports.transformLayout=v;exports.transformSegment=Y;exports.transformSpoke=M;exports.useElementToMouseAngle=et;exports.useLabel=C;exports.useLayout=b;exports.useSegment=j;exports.useSegmentState=y;exports.useSpoke=R;exports.useSpokeState=D;exports.useWheel=W;