From 615f5cec514444d5b8b0bcf29e9dc3fa1de0db85 Mon Sep 17 00:00:00 2001 From: Gabriel Musat Date: Tue, 18 Jun 2024 09:13:15 +0200 Subject: [PATCH] Improve coloring --- internal/entropy/generated/index.html | 2 +- web/src/color.ts | 23 ++++++++++++++--------- 2 files changed, 15 insertions(+), 10 deletions(-) diff --git a/internal/entropy/generated/index.html b/internal/entropy/generated/index.html index 7b3f20c..d7ca785 100644 --- a/internal/entropy/generated/index.html +++ b/internal/entropy/generated/index.html @@ -4575,7 +4575,7 @@ * Copyright (c) 2014-2015, 2017, Jon Schlinkert. * Released under the MIT License. */var tG=X6,nG=Z6,a1=$T,s1=eG,rG=function(t,e,n){if(!s1(t)||(Array.isArray(e)&&(e=[].concat.apply([],e).join(".")),typeof e!="string"))return t;for(var r=tG(e,{sep:".",brackets:!0}).filter(iG),i=r.length,o=-1,a=t;++ot.filter(Boolean).join(".");function lG(t){const e=t.split(".");return[e.pop(),e.join(".")||void 0]}function cG(t,e){return Object.entries(UH(t,e)).reduce((n,[,{value:r,disabled:i,key:o}])=>(n[o]=i?void 0:r,n),{})}function uG(t,e){const n=A.useRef();return fc(t,n.current)||(n.current=t),n.current}function VT(t,e){return A.useMemo(t,uG(e))}function fG(t){const e=A.useRef(null),n=A.useRef(null),r=A.useRef(!0);return A.useLayoutEffect(()=>{t||(e.current.style.height="0px",e.current.style.overflow="hidden")},[]),A.useEffect(()=>{if(r.current){r.current=!1;return}let i;const o=e.current,a=()=>{t&&(o.style.removeProperty("height"),o.style.removeProperty("overflow"),n.current.scrollIntoView({behavior:"smooth",block:"nearest"}))};o.addEventListener("transitionend",a,{once:!0});const{height:s}=n.current.getBoundingClientRect();return o.style.height=s+"px",t||(o.style.overflow="hidden",i=window.setTimeout(()=>o.style.height="0px",50)),()=>{o.removeEventListener("transitionend",a),clearTimeout(i)}},[t]),{wrapperRef:e,contentRef:n}}const dG=t=>{const[e,n]=A.useState(t.getVisiblePaths());return A.useEffect(()=>{n(t.getVisiblePaths());const r=t.useStore.subscribe(t.getVisiblePaths,n,{equalityFn:Od});return()=>r()},[t]),e};function hG(t,e,n){return t.useStore(i=>{const o=Ve(Ve({},n),i.data);return cG(o,e)},Od)}function GT(t=3){const e=A.useRef(null),n=A.useRef(null),[r,i]=A.useState(!1),o=A.useCallback(()=>i(!0),[]),a=A.useCallback(()=>i(!1),[]);return A.useLayoutEffect(()=>{if(r){const{bottom:s,top:l,left:c}=e.current.getBoundingClientRect(),{height:u}=n.current.getBoundingClientRect(),f=s+u>window.innerHeight-40?"up":"down";n.current.style.position="fixed",n.current.style.zIndex="10000",n.current.style.left=c+"px",f==="down"?n.current.style.top=s+t+"px":n.current.style.bottom=window.innerHeight-l+t+"px"}},[t,r]),{popinRef:e,wrapperRef:n,shown:r,show:o,hide:a}}x8([b8]);const pG={rgb:"toRgb",hsl:"toHsl",hsv:"toHsv",hex:"toHex"};Pn.extend({color:()=>t=>vn(t).isValid()});const mG=t=>Pn().color().test(t);function jT(t,{format:e,hasAlpha:n,isString:r}){const i=pG[e]+(r&&e!=="hex"?"String":""),o=t[i]();return typeof o=="object"&&!n?FH(o,["a"]):o}const WT=(t,e)=>{const n=vn(t);if(!n.isValid())throw Error("Invalid color");return jT(n,e)},gG=(t,e)=>jT(vn(t),Ve(Ve({},e),{},{isString:!0,format:"hex"})),vG=({value:t})=>{const e=_8(t),n=e==="name"?"hex":e,r=typeof t=="object"?"a"in t:e==="hex"&&t.length===8||/^(rgba)|(hsla)|(hsva)/.test(t),i={format:n,hasAlpha:r,isString:typeof t=="string"};return{value:WT(t,i),settings:i}};var yG=Object.freeze({__proto__:null,schema:mG,sanitize:WT,format:gG,normalize:vG});const _G=Fe("div",{position:"relative",boxSizing:"border-box",borderRadius:"$sm",overflow:"hidden",cursor:"pointer",height:"$rowHeight",width:"$rowHeight",backgroundColor:"#fff",backgroundImage:`url('data:image/svg+xml;charset=utf-8,')`,$inputStyle:"",$hover:"",zIndex:1,variants:{active:{true:{$inputStyle:"$accent1"}}},"&::before":{content:'""',position:"absolute",top:0,bottom:0,right:0,left:0,backgroundColor:"currentColor",zIndex:1}}),xG=Fe("div",{position:"relative",display:"grid",gridTemplateColumns:"$sizes$rowHeight auto",columnGap:"$colGap",alignItems:"center"}),bG=Fe("div",{width:"$colorPickerWidth",height:"$colorPickerHeight",".react-colorful":{width:"100%",height:"100%",boxShadow:"$level2",cursor:"crosshair"},".react-colorful__saturation":{borderRadius:"$sm $sm 0 0"},".react-colorful__alpha, .react-colorful__hue":{height:10},".react-colorful__last-control":{borderRadius:"0 0 $sm $sm"},".react-colorful__pointer":{height:12,width:12}});function u1(t,e){return e!=="rgb"?vn(t).toRgb():t}function SG({value:t,displayValue:e,settings:n,onUpdate:r}){const{emitOnEditStart:i,emitOnEditEnd:o}=fn(),{format:a,hasAlpha:s}=n,{popinRef:l,wrapperRef:c,shown:u,show:f,hide:h}=GT(),p=A.useRef(0),[m,v]=A.useState(()=>u1(t,a)),g=s?A8:P8,d=()=>{v(u1(t,a)),f(),i()},y=()=>{h(),o(),window.clearTimeout(p.current)},_=()=>{p.current=window.setTimeout(y,500)};return A.useEffect(()=>()=>window.clearTimeout(p.current),[]),z.createElement(z.Fragment,null,z.createElement(_G,{ref:l,active:u,onClick:()=>d(),style:{color:e}}),u&&z.createElement(Yv,null,z.createElement(hT,{onPointerUp:y}),z.createElement(bG,{ref:c,onMouseEnter:()=>window.clearTimeout(p.current),onMouseLeave:x=>x.buttons===0&&_()},z.createElement(g,{color:m,onChange:r}))))}function wG(){const{value:t,displayValue:e,label:n,onChange:r,onUpdate:i,settings:o}=fn();return z.createElement(ur,{input:!0},z.createElement(Dr,null,n),z.createElement(xG,null,z.createElement(SG,{value:t,displayValue:e,onChange:r,onUpdate:i,settings:o}),z.createElement(qv,{value:e,onChange:r,onUpdate:i})))}var EG=Ve({component:wG},yG);function MG(){const{label:t,displayValue:e,onUpdate:n,settings:r}=fn();return z.createElement(ur,{input:!0},z.createElement(Dr,null,t),z.createElement(Zv,{value:e,settings:r,onUpdate:n}))}var TG=Ve({component:MG},bT(["x","y","z"]));const CG=Fe("div",{$flexCenter:"",position:"relative",backgroundColor:"$elevation3",borderRadius:"$sm",cursor:"pointer",height:"$rowHeight",width:"$rowHeight",touchAction:"none",$draggable:"",$hover:"","&:active":{cursor:"none"},"&::after":{content:'""',backgroundColor:"$accent2",height:4,width:4,borderRadius:2}}),AG=Fe("div",{$flexCenter:"",width:"$joystickWidth",height:"$joystickHeight",borderRadius:"$sm",boxShadow:"$level2",position:"fixed",zIndex:1e4,overflow:"hidden",$draggable:"",transform:"translate(-50%, -50%)",variants:{isOutOfBounds:{true:{backgroundColor:"$elevation1"},false:{backgroundColor:"$elevation3"}}},"> div":{position:"absolute",$flexCenter:"",borderStyle:"solid",borderWidth:1,borderColor:"$highlight1",backgroundColor:"$elevation3",width:"80%",height:"80%","&::after,&::before":{content:'""',position:"absolute",zindex:10,backgroundColor:"$highlight1"},"&::before":{width:"100%",height:1},"&::after":{height:"100%",width:1}},"> span":{position:"relative",zindex:100,width:10,height:10,backgroundColor:"$accent2",borderRadius:"50%"}});function RG({value:t,settings:e,onUpdate:n}){const r=A.useRef(),i=A.useRef(0),o=A.useRef(0),a=A.useRef(1),[s,l]=A.useState(!1),[c,u]=A.useState(!1),[f,h]=mT(),p=A.useRef(null),m=A.useRef(null);A.useLayoutEffect(()=>{if(s){const{top:I,left:H,width:D,height:L}=p.current.getBoundingClientRect();m.current.style.left=H+D/2+"px",m.current.style.top=I+L/2+"px"}},[s]);const{keys:[v,g],joystick:d}=e,y=d==="invertY"?1:-1,{[v]:{step:_},[g]:{step:x}}=e,S=wi("sizes","joystickWidth"),b=wi("sizes","joystickHeight"),E=parseFloat(S)*.8/2,C=parseFloat(b)*.8/2,M=A.useCallback(()=>{r.current||(u(!0),i.current&&h({x:i.current*E}),o.current&&h({y:o.current*-C}),r.current=window.setInterval(()=>{n(I=>{const H=_*i.current*a.current,D=y*x*o.current*a.current;return Array.isArray(I)?{[v]:I[0]+H,[g]:I[1]+D}:{[v]:I[v]+H,[g]:I[g]+D}})},16))},[E,C,n,h,_,x,v,g,y]),w=A.useCallback(()=>{window.clearTimeout(r.current),r.current=void 0,u(!1)},[]);A.useEffect(()=>{function I(H){a.current=JM(H)}return window.addEventListener("keydown",I),window.addEventListener("keyup",I),()=>{window.clearTimeout(r.current),window.removeEventListener("keydown",I),window.removeEventListener("keyup",I)}},[]);const P=Pc(({first:I,active:H,delta:[D,L],movement:[N,q]})=>{I&&l(!0);const F=_o(N,-E,E),ee=_o(q,-C,C);i.current=Math.abs(N)>Math.abs(F)?Math.sign(N-F):0,o.current=Math.abs(q)>Math.abs(ee)?Math.sign(ee-q):0;let W=t[v],Z=t[g];H?(i.current||(W+=D*_*a.current,h({x:F})),o.current||(Z-=y*L*x*a.current,h({y:ee})),i.current||o.current?M():w(),n({[v]:W,[g]:Z})):(l(!1),i.current=0,o.current=0,h({x:0,y:0}),w())});return z.createElement(CG,Dt({ref:p},P()),s&&z.createElement(Yv,null,z.createElement(AG,{ref:m,isOutOfBounds:c},z.createElement("div",null),z.createElement("span",{ref:f}))))}const PG=Fe("div",{display:"grid",columnGap:"$colGap",variants:{withJoystick:{true:{gridTemplateColumns:"$sizes$rowHeight auto"},false:{gridTemplateColumns:"auto"}}}});function OG(){const{label:t,displayValue:e,onUpdate:n,settings:r}=fn();return z.createElement(ur,{input:!0},z.createElement(Dr,null,t),z.createElement(PG,{withJoystick:!!r.joystick},r.joystick&&z.createElement(RG,{value:e,settings:r,onUpdate:n}),z.createElement(Zv,{value:e,settings:r,onUpdate:n})))}const LG=["joystick"],XT=bT(["x","y"]),DG=t=>{let{joystick:e=!0}=t,n=dt(t,LG);const{value:r,settings:i}=XT.normalize(n);return{value:r,settings:Ve(Ve({},i),{},{joystick:e})}};var IG=Ve(Ve({component:OG},XT),{},{normalize:DG});const NG=t=>{if(t!==void 0){if(t instanceof File)try{return URL.createObjectURL(t)}catch{return}if(typeof t=="string"&&t.indexOf("blob:")===0)return t;throw Error("Invalid image format [undefined | blob | File].")}},kG=(t,e)=>typeof e=="object"&&"image"in e,UG=({image:t})=>({value:t});var FG=Object.freeze({__proto__:null,sanitize:NG,schema:kG,normalize:UG});const zG=Fe("div",{position:"relative",display:"grid",gridTemplateColumns:"$sizes$rowHeight auto 20px",columnGap:"$colGap",alignItems:"center"}),BG=Fe("div",{$flexCenter:"",overflow:"hidden",height:"$rowHeight",background:"$elevation3",textAlign:"center",color:"inherit",borderRadius:"$sm",outline:"none",userSelect:"none",cursor:"pointer",$inputStyle:"",$hover:"",$focusWithin:"",$active:"$accent1 $elevation1",variants:{isDragAccept:{true:{$inputStyle:"$accent1",backgroundColor:"$elevation1"}}}}),$G=Fe("div",{boxSizing:"border-box",borderRadius:"$sm",height:"$rowHeight",width:"$rowHeight",$inputStyle:"",backgroundSize:"cover",backgroundPosition:"center",variants:{hasImage:{true:{cursor:"pointer",$hover:"",$active:""}}}}),HG=Fe("div",{$flexCenter:"",width:"$imagePreviewWidth",height:"$imagePreviewHeight",borderRadius:"$sm",boxShadow:"$level2",pointerEvents:"none",$inputStyle:"",backgroundSize:"cover",backgroundPosition:"center"}),VG=Fe("div",{fontSize:"0.8em",height:"100%",padding:"$rowGap $md"}),GG=Fe("div",{$flexCenter:"",top:"0",right:"0",marginRight:"$sm",height:"100%",cursor:"pointer",variants:{disabled:{true:{color:"$elevation3",cursor:"default"}}},"&::after,&::before":{content:'""',position:"absolute",height:2,width:10,borderRadius:1,backgroundColor:"currentColor"},"&::after":{transform:"rotate(45deg)"},"&::before":{transform:"rotate(-45deg)"}});function jG(){const{label:t,value:e,onUpdate:n,disabled:r}=fn(),{popinRef:i,wrapperRef:o,shown:a,show:s,hide:l}=GT(),c=A.useCallback(m=>{m.length&&n(m[0])},[n]),u=A.useCallback(m=>{m.stopPropagation(),n(void 0)},[n]),{getRootProps:f,getInputProps:h,isDragAccept:p}=BT({maxFiles:1,accept:"image/*",onDrop:c,disabled:r});return z.createElement(ur,{input:!0},z.createElement(Dr,null,t),z.createElement(zG,null,z.createElement($G,{ref:i,hasImage:!!e,onPointerDown:()=>!!e&&s(),onPointerUp:l,style:{backgroundImage:e?`url(${e})`:"none"}}),a&&!!e&&z.createElement(Yv,null,z.createElement(hT,{onPointerUp:l,style:{cursor:"pointer"}}),z.createElement(HG,{ref:o,style:{backgroundImage:`url(${e})`}})),z.createElement(BG,f({isDragAccept:p}),z.createElement("input",h()),z.createElement(VG,null,p?"drop image":"click or drop")),z.createElement(GG,{onClick:u,disabled:!e})))}var WG=Ve({component:jG},FG);const f1=Pn().number(),XG=(t,e)=>Pn().array().length(2).every.number().test(t)&&Pn().schema({min:f1,max:f1}).test(e),Zf=t=>({min:t[0],max:t[1]}),qT=(t,{bounds:[e,n]},r)=>{const i=Array.isArray(t)?Zf(t):t,o={min:r[0],max:r[1]},{min:a,max:s}=Ve(Ve({},o),i);return[_o(Number(a),e,Math.max(e,s)),_o(Number(s),Math.min(n,a),n)]},qG=({value:t,min:e,max:n})=>{const r={min:e,max:n},i=xT(Zf(t),{min:r,max:r}),o=[e,n],a=Ve(Ve({},i),{},{bounds:o});return{value:qT(Zf(t),a,t),settings:a}};var YG=Object.freeze({__proto__:null,schema:XG,format:Zf,sanitize:qT,normalize:qG});const KG=["value","bounds","onDrag"],ZG=["bounds"],QG=Fe("div",{display:"grid",columnGap:"$colGap",gridTemplateColumns:"auto calc($sizes$numberInputMinWidth * 2 + $space$rowGap)"});function JG(t){let{value:e,bounds:[n,r],onDrag:i}=t,o=dt(t,KG);const a=A.useRef(null),s=A.useRef(null),l=A.useRef(null),c=A.useRef(0),u=wi("sizes","scrubberWidth"),f=Pc(({event:m,first:v,xy:[g],movement:[d],memo:y={}})=>{if(v){const{width:x,left:S}=a.current.getBoundingClientRect();c.current=x-parseFloat(u);const b=(m==null?void 0:m.target)===s.current||(m==null?void 0:m.target)===l.current;y.pos=Wf((g-S)/x,n,r);const E=Math.abs(y.pos-e.min)-Math.abs(y.pos-e.max);y.key=E<0||E===0&&y.pos<=e.min?"min":"max",b&&(y.pos=e[y.key])}const _=y.pos+Wf(d/c.current,0,r-n);return i({[y.key]:TV(_,o[y.key])}),y}),h=`calc(${jf(e.min,n,r)} * (100% - ${u} - 8px) + 4px)`,p=`calc(${1-jf(e.max,n,r)} * (100% - ${u} - 8px) + 4px)`;return z.createElement(vT,Dt({ref:a},f()),z.createElement(gT,null,z.createElement(yT,{style:{left:h,right:p}})),z.createElement(ng,{position:"left",ref:s,style:{left:h}}),z.createElement(ng,{position:"right",ref:l,style:{right:p}}))}function ej(){const{label:t,displayValue:e,onUpdate:n,settings:r}=fn(),i=dt(r,ZG);return z.createElement(z.Fragment,null,z.createElement(ur,{input:!0},z.createElement(Dr,null,t),z.createElement(QG,null,z.createElement(JG,Dt({value:e},r,{onDrag:n})),z.createElement(Zv,{value:e,settings:i,onUpdate:n,innerLabelTrim:0}))))}var tj=Ve({component:ej},YG);const nj=()=>{const t=new Map;return{on:(e,n)=>{let r=t.get(e);r===void 0&&(r=new Set,t.set(e,r)),r.add(n)},off:(e,n)=>{const r=t.get(e);r!==void 0&&(r.delete(n),r.size===0&&t.delete(e))},emit:(e,...n)=>{const r=t.get(e);if(r!==void 0)for(const i of r)i(...n)}}},rj=["type","value"],ij=["onChange","transient","onEditStart","onEditEnd"],oj=function(){const e=M6(T6(()=>({data:{}}))),n=nj();this.storeId=kH(),this.useStore=e;const r={},i=new Set;this.getVisiblePaths=()=>{const a=this.getData(),s=Object.keys(a),l=[];Object.entries(r).forEach(([u,f])=>{f.render&&s.some(h=>h.indexOf(u)===0)&&!f.render(this.get)&&l.push(u+".")});const c=[];return i.forEach(u=>{u in a&&a[u].__refCount>0&&l.every(f=>u.indexOf(f)===-1)&&(!a[u].render||a[u].render(this.get))&&c.push(u)}),c},this.setOrderedPaths=a=>{a.forEach(s=>i.add(s))},this.orderPaths=a=>(this.setOrderedPaths(a),a),this.disposePaths=a=>{e.setState(s=>{const l=s.data;return a.forEach(c=>{if(c in l){const u=l[c];u.__refCount--,u.__refCount===0&&u.type in Cr&&delete l[c]}}),{data:l}})},this.dispose=()=>{e.setState(()=>({data:{}}))},this.getFolderSettings=a=>r[a]||{},this.getData=()=>e.getState().data,this.addData=(a,s)=>{e.setState(l=>{const c=l.data;return Object.entries(a).forEach(([u,f])=>{let h=c[u];if(h){const{type:p,value:m}=f,v=dt(f,rj);p!==h.type?mi(Et.INPUT_TYPE_OVERRIDE,p):((h.__refCount===0||s)&&Object.assign(h,v),h.__refCount++)}else c[u]=Ve(Ve({},f),{},{__refCount:1})}),{data:c}})},this.setValueAtPath=(a,s,l)=>{e.setState(c=>{const u=c.data;return Ib(u[a],s,a,this,l),{data:u}})},this.setSettingsAtPath=(a,s)=>{e.setState(l=>{const c=l.data;return c[a].settings=Ve(Ve({},c[a].settings),s),{data:c}})},this.disableInputAtPath=(a,s)=>{e.setState(l=>{const c=l.data;return c[a].disabled=s,{data:c}})},this.set=(a,s)=>{e.setState(l=>{const c=l.data;return Object.entries(a).forEach(([u,f])=>{try{Ib(c[u],f,void 0,void 0,s)}catch{}}),{data:c}})},this.getInput=a=>{try{return this.getData()[a]}catch{mi(Et.PATH_DOESNT_EXIST,a)}},this.get=a=>{var s;return(s=this.getInput(a))===null||s===void 0?void 0:s.value},this.emitOnEditStart=a=>{n.emit(`onEditStart:${a}`,this.get(a),a,Ve(Ve({},this.getInput(a)),{},{get:this.get}))},this.emitOnEditEnd=a=>{n.emit(`onEditEnd:${a}`,this.get(a),a,Ve(Ve({},this.getInput(a)),{},{get:this.get}))},this.subscribeToEditStart=(a,s)=>{const l=`onEditStart:${a}`;return n.on(l,s),()=>n.off(l,s)},this.subscribeToEditEnd=(a,s)=>{const l=`onEditEnd:${a}`;return n.on(l,s),()=>n.off(l,s)};const o=(a,s,l)=>{const c={};return Object.entries(a).forEach(([u,f])=>{if(u==="")return mi(Et.EMPTY_KEY);let h=i0(s,u);if(f.type===Cr.FOLDER){const p=o(f.schema,h,l);Object.assign(c,p),h in r||(r[h]=f.settings)}else if(u in l)mi(Et.DUPLICATE_KEYS,u,h,l[u].path);else{const p=GH(f,u,h,c);if(p){const{type:m,options:v,input:g}=p,{onChange:d,transient:y,onEditStart:_,onEditEnd:x}=v,S=dt(v,ij);c[h]=Ve(Ve(Ve({type:m},S),g),{},{fromPanel:!0}),l[u]={path:h,onChange:d,transient:y,onEditStart:_,onEditEnd:x}}else mi(Et.UNKNOWN_INPUT,h,f)}}),c};this.getDataFromSchema=a=>{const s={};return[o(a,"",s),s]}},YT=new oj,aj={collapsed:!1};function sj(t,e){return{type:Cr.FOLDER,schema:t,settings:Ve(Ve({},aj),e)}}const d1=t=>"__levaInput"in t,lj=(t,e)=>{const n={},r=e?e.toLowerCase():null;return t.forEach(i=>{const[o,a]=lG(i);(!r||o.toLowerCase().indexOf(r)>-1)&&sG(n,a,{[o]:{__levaInput:!0,path:i}})}),n},cj=["type","label","path","valueKey","value","settings","setValue","disabled"];function uj(t){let{type:e,label:n,path:r,valueKey:i,value:o,settings:a,setValue:s,disabled:l}=t,c=dt(t,cj);const{displayValue:u,onChange:f,onUpdate:h}=pT({type:e,value:o,settings:a,setValue:s}),p=sa[e].component;return p?z.createElement(iT.Provider,{value:Ve({key:i,path:r,id:""+r,label:n,displayValue:u,value:o,onChange:f,onUpdate:h,settings:a,setValue:s,disabled:l},c)},z.createElement(uV,{disabled:l},z.createElement(p,null))):(mi(Et.NO_COMPONENT_FOR_TYPE,e,r),null)}const fj=Fe("button",{display:"block",$reset:"",fontWeight:"$button",height:"$rowHeight",borderStyle:"none",borderRadius:"$sm",backgroundColor:"$elevation1",color:"$highlight1","&:not(:disabled)":{color:"$highlight3",backgroundColor:"$accent2",cursor:"pointer",$hover:"$accent3",$active:"$accent3 $accent1",$focus:""}});function dj({onClick:t,settings:e,label:n}){const r=Rc();return z.createElement(ur,null,z.createElement(fj,{disabled:e.disabled,onClick:()=>t(r.get)},n))}const hj=Fe("div",{$flex:"",justifyContent:"flex-end",gap:"$colGap"}),pj=Fe("button",{$reset:"",cursor:"pointer",borderRadius:"$xs","&:hover":{backgroundColor:"$elevation3"}}),mj=({label:t,opts:e})=>{let n=typeof t=="string"&&t.trim()===""?null:t,r=e;return typeof e.opts=="object"&&(r.label!==void 0&&(n=e.label),r=e.opts),{label:n,opts:r}};function gj(t){const{label:e,opts:n}=mj(t),r=Rc();return z.createElement(ur,{input:!!e},e&&z.createElement(Dr,null,e),z.createElement(hj,null,Object.entries(n).map(([i,o])=>z.createElement(pj,{key:i,onClick:()=>o(r.get)},i))))}const vj=Fe("canvas",{height:"$monitorHeight",width:"100%",display:"block",borderRadius:"$sm"}),KT=100;function yj(t,e){t.push(e),t.length>KT&&t.shift()}const _j=A.forwardRef(function({initialValue:t},e){const n=wi("colors","highlight3"),r=wi("colors","elevation2"),i=wi("colors","highlight1"),[o,a]=A.useMemo(()=>[vn(i).alpha(.4).toRgbString(),vn(i).alpha(.1).toRgbString()],[i]),s=A.useRef([t]),l=A.useRef(t),c=A.useRef(t),u=A.useRef(),f=A.useCallback((m,v)=>{if(!m)return;const{width:g,height:d}=m,y=new Path2D,_=g/KT,x=d*.05;for(let E=0;E({frame:m=>{(l.current===void 0||mc.current)&&(c.current=m),yj(s.current,m),u.current=requestAnimationFrame(()=>f(h.current,p.current))}}),[h,p,f]),A.useEffect(()=>()=>cancelAnimationFrame(u.current),[]),z.createElement(vj,{ref:h})}),h1=t=>Number.isFinite(t)?t.toPrecision(2):t.toString(),xj=A.forwardRef(function({initialValue:t},e){const[n,r]=A.useState(h1(t));return A.useImperativeHandle(e,()=>({frame:i=>r(h1(i))}),[]),z.createElement("div",null,n)});function p1(t){return typeof t=="function"?t():t.current}function bj({label:t,objectOrFn:e,settings:n}){const r=A.useRef(),i=A.useRef(p1(e));return A.useEffect(()=>{const o=window.setInterval(()=>{var a;document.hidden||(a=r.current)===null||a===void 0||a.frame(p1(e))},n.interval);return()=>window.clearInterval(o)},[e,n.interval]),z.createElement(ur,{input:!0},z.createElement(Dr,{align:"top"},t),n.graph?z.createElement(_j,{ref:r,initialValue:i.current}):z.createElement(xj,{ref:r,initialValue:i.current}))}const Sj=["type","label","key"],wj={[Cr.BUTTON]:dj,[Cr.BUTTON_GROUP]:gj,[Cr.MONITOR]:bj},Ej=z.memo(({path:t})=>{const[e,{set:n,setSettings:r,disable:i,storeId:o,emitOnEditStart:a,emitOnEditEnd:s}]=bV(t);if(!e)return null;const{type:l,label:c,key:u}=e,f=dt(e,Sj);if(l in Cr){const h=wj[l];return z.createElement(h,Dt({label:c,path:t},f))}return l in sa?z.createElement(uj,Dt({key:o+t,type:l,label:c,storeId:o,path:t,valueKey:u,setValue:n,setSettings:r,disable:i,emitOnEditStart:a,emitOnEditEnd:s},f)):(AH(Et.UNSUPPORTED_INPUT,l,t),null)});function Mj({toggle:t,toggled:e,name:n}){return z.createElement(sV,{onClick:()=>t()},z.createElement(Kv,{toggled:e}),z.createElement("div",null,n))}const Tj=({name:t,path:e,tree:n})=>{const r=Rc(),i=i0(e,t),{collapsed:o,color:a}=r.getFolderSettings(i),[s,l]=A.useState(!o),c=A.useRef(null),u=wi("colors","folderWidgetColor"),f=wi("colors","folderTextColor");return A.useLayoutEffect(()=>{c.current.style.setProperty("--leva-colors-folderWidgetColor",a||u),c.current.style.setProperty("--leva-colors-folderTextColor",a||f)},[a,u,f]),z.createElement(Xf,{ref:c},z.createElement(Mj,{name:t,toggled:s,toggle:()=>l(h=>!h)}),z.createElement(ZT,{parent:i,tree:n,toggled:s}))},ZT=z.memo(({isRoot:t=!1,fill:e=!1,flat:n=!1,parent:r,tree:i,toggled:o})=>{const{wrapperRef:a,contentRef:s}=fG(o),l=Rc(),c=([f,h])=>{var p;return(d1(h)?(p=l.getInput(h.path))===null||p===void 0?void 0:p.order:l.getFolderSettings(i0(r,f)).order)||0},u=Object.entries(i).sort((f,h)=>c(f)-c(h));return z.createElement(eg,{ref:a,isRoot:t,fill:e,flat:n},z.createElement(uT,{ref:s,isRoot:t,toggled:o},u.map(([f,h])=>d1(h)?z.createElement(Ej,{key:h.path,valueKey:h.valueKey,path:h.path}):z.createElement(Tj,{key:f,name:f,path:r,tree:h}))))}),Cj=Fe("div",{position:"relative",fontFamily:"$mono",fontSize:"$root",color:"$rootText",backgroundColor:"$elevation1",variants:{fill:{false:{position:"fixed",top:"10px",right:"10px",zIndex:1e3,width:"$rootWidth"},true:{position:"relative",width:"100%"}},flat:{false:{borderRadius:"$lg",boxShadow:"$level1"}},oneLineLabels:{true:{[`${dT}`]:{gridTemplateColumns:"auto",gridAutoColumns:"minmax(max-content, 1fr)",gridAutoRows:"minmax($sizes$rowHeight), auto)",rowGap:0,columnGap:0,marginTop:"$rowGap"}}},hideTitleBar:{true:{$$titleBarHeight:"0px"},false:{$$titleBarHeight:"$sizes$titleBarHeight"}}},"&,*,*:after,*:before":{boxSizing:"border-box"},"*::selection":{backgroundColor:"$accent2"}}),QT=40,Qf=Fe("i",{$flexCenter:"",width:QT,userSelect:"none",cursor:"pointer","> svg":{fill:"$highlight1",transition:"transform 350ms ease, fill 250ms ease"},"&:hover > svg":{fill:"$highlight3"},variants:{active:{true:{"> svg":{fill:"$highlight2"}}}}}),Aj=Fe("div",{display:"flex",alignItems:"stretch",justifyContent:"space-between",height:"$titleBarHeight",variants:{mode:{drag:{cursor:"grab"}}}}),Rj=Fe("div",{$flex:"",position:"relative",width:"100%",overflow:"hidden",transition:"height 250ms ease",color:"$highlight3",paddingLeft:"$md",[`> ${Qf}`]:{height:30},variants:{toggled:{true:{height:30},false:{height:0}}}}),Pj=Fe("input",{$reset:"",flex:1,position:"relative",height:30,width:"100%",backgroundColor:"transparent",fontSize:"10px",borderRadius:"$root","&:focus":{},"&::placeholder":{color:"$highlight2"}}),Oj=Fe("div",{touchAction:"none",$flexCenter:"",flex:1,"> svg":{fill:"$highlight1"},color:"$highlight1",variants:{drag:{true:{$draggable:"","> svg":{transition:"fill 250ms ease"},"&:hover":{color:"$highlight3"},"&:hover > svg":{fill:"$highlight3"}}},filterEnabled:{false:{paddingRight:QT}}}}),Lj=z.forwardRef(({setFilter:t,toggle:e},n)=>{const[r,i]=A.useState(""),o=A.useMemo(()=>QM(t,250),[t]),a=()=>{t(""),i("")},s=l=>{const c=l.currentTarget.value;e(!0),i(c)};return A.useEffect(()=>{o(r)},[r,o]),z.createElement(z.Fragment,null,z.createElement(Pj,{ref:n,value:r,placeholder:"[Open filter with CMD+SHIFT+L]",onPointerDown:l=>l.stopPropagation(),onChange:s}),z.createElement(Qf,{onClick:()=>a(),style:{visibility:r?"visible":"hidden"}},z.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"14",width:"14",viewBox:"0 0 20 20",fill:"currentColor"},z.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z",clipRule:"evenodd"}))))});function Dj({setFilter:t,onDrag:e,onDragStart:n,onDragEnd:r,toggle:i,toggled:o,title:a,drag:s,filterEnabled:l,from:c}){const[u,f]=A.useState(!1),h=A.useRef(null);A.useEffect(()=>{var m,v;u?(m=h.current)===null||m===void 0||m.focus():(v=h.current)===null||v===void 0||v.blur()},[u]);const p=Pc(({offset:[m,v],first:g,last:d})=>{e({x:m,y:v}),g&&n({x:m,y:v}),d&&r({x:m,y:v})},{filterTaps:!0,from:({offset:[m,v]})=>[(c==null?void 0:c.x)||m,(c==null?void 0:c.y)||v]});return A.useEffect(()=>{const m=v=>{v.key==="L"&&v.shiftKey&&v.metaKey&&f(g=>!g)};return window.addEventListener("keydown",m),()=>window.removeEventListener("keydown",m)},[]),z.createElement(z.Fragment,null,z.createElement(Aj,{mode:s?"drag":void 0},z.createElement(Qf,{active:!o,onClick:()=>i()},z.createElement(Kv,{toggled:o,width:12,height:8})),z.createElement(Oj,Dt({},s?p():{},{drag:s,filterEnabled:l}),a===void 0&&s?z.createElement("svg",{width:"20",height:"10",viewBox:"0 0 28 14",xmlns:"http://www.w3.org/2000/svg"},z.createElement("circle",{cx:"2",cy:"2",r:"2"}),z.createElement("circle",{cx:"14",cy:"2",r:"2"}),z.createElement("circle",{cx:"26",cy:"2",r:"2"}),z.createElement("circle",{cx:"2",cy:"12",r:"2"}),z.createElement("circle",{cx:"14",cy:"12",r:"2"}),z.createElement("circle",{cx:"26",cy:"12",r:"2"})):a),l&&z.createElement(Qf,{active:u,onClick:()=>f(m=>!m)},z.createElement("svg",{xmlns:"http://www.w3.org/2000/svg",height:"20",viewBox:"0 0 20 20"},z.createElement("path",{d:"M9 9a2 2 0 114 0 2 2 0 01-4 0z"}),z.createElement("path",{fillRule:"evenodd",d:"M10 18a8 8 0 100-16 8 8 0 000 16zm1-13a4 4 0 00-3.446 6.032l-2.261 2.26a1 1 0 101.414 1.415l2.261-2.261A4 4 0 1011 5z",clipRule:"evenodd"})))),z.createElement(Rj,{toggled:u},z.createElement(Lj,{ref:h,setFilter:t,toggle:i})))}const Ij=["store","hidden","theme","collapsed"];function Nj(t){let{store:e,hidden:n=!1,theme:r,collapsed:i=!1}=t,o=dt(t,Ij);const a=VT(()=>tV(r),[r]),[s,l]=A.useState(!i),c=typeof i=="object"?!i.collapsed:s,u=A.useMemo(()=>typeof i=="object"?f=>{typeof f=="function"?i.onChange(!f(!i.collapsed)):i.onChange(!f)}:l,[i]);return!e||n?null:z.createElement(Xv.Provider,{value:a},z.createElement(kj,Dt({store:e},o,{toggled:c,setToggle:u,rootClass:a.className})))}const kj=z.memo(({store:t,rootClass:e,fill:n=!1,flat:r=!1,neverHide:i=!1,oneLineLabels:o=!1,titleBar:a={title:void 0,drag:!0,filter:!0,position:void 0,onDrag:void 0,onDragStart:void 0,onDragEnd:void 0},hideCopyButton:s=!1,toggled:l,setToggle:c})=>{var u,f;const h=dG(t),[p,m]=A.useState(""),v=A.useMemo(()=>lj(h,p),[h,p]),[g,d]=mT(),y=i||h.length>0,_=typeof a=="object"&&a.title||void 0,x=typeof a=="object"&&(u=a.drag)!==null&&u!==void 0?u:!0,S=typeof a=="object"&&(f=a.filter)!==null&&f!==void 0?f:!0,b=typeof a=="object"&&a.position||void 0,E=typeof a=="object"&&a.onDrag||void 0,C=typeof a=="object"&&a.onDragStart||void 0,M=typeof a=="object"&&a.onDragEnd||void 0;return z.useEffect(()=>{d({x:b==null?void 0:b.x,y:b==null?void 0:b.y})},[b,d]),eV(),z.createElement(aT.Provider,{value:{hideCopyButton:s}},z.createElement(Cj,{ref:g,className:e,fill:n,flat:r,oneLineLabels:o,hideTitleBar:!a,style:{display:y?"block":"none"}},a&&z.createElement(Dj,{onDrag:w=>{d(w),E==null||E(w)},onDragStart:w=>C==null?void 0:C(w),onDragEnd:w=>M==null?void 0:M(w),setFilter:m,toggle:w=>c(P=>w??!P),toggled:l,title:_,drag:x,filterEnabled:S,from:b}),y&&z.createElement(oT.Provider,{value:t},z.createElement(ZT,{isRoot:!0,fill:n,flat:r,tree:v,toggled:l}))))}),Uj=["isRoot"];let Jf=!1,Xo=null;function JT(t){let{isRoot:e=!1}=t,n=dt(t,Uj);return A.useEffect(()=>(Jf=!0,!e&&Xo&&(Xo.remove(),Xo=null),()=>{e||(Jf=!1)}),[e]),z.createElement(Nj,Dt({store:YT},n))}function Fj(t){A.useEffect(()=>{t&&!Jf&&(Xo||(Xo=document.getElementById("leva__root")||Object.assign(document.createElement("div"),{id:"leva__root"}),document.body&&(document.body.appendChild(Xo),WH(z.createElement(JT,{isRoot:!0}),Xo))),Jf=!0)},[t])}function zj(t,e,n,r,i){let o,a,s,l,c;return typeof t=="string"?(a=t,o=e,Array.isArray(n)&&(c=n)):(o=t,Array.isArray(e)?c=e:(l=e,c=n)),{schema:o,folderName:a,folderSettings:s,hookSettings:l,deps:c||[]}}function Bj(t,e,n,r,i){const{folderName:o,schema:a,folderSettings:s,hookSettings:l,deps:c}=zj(t,e,n),u=typeof a=="function",f=A.useRef(!1),h=A.useRef(!0),p=VT(()=>{f.current=!0;const P=typeof a=="function"?a():a;return o?{[o]:sj(P,s)}:P},c),m=!(l!=null&&l.store);Fj(m);const[v]=A.useState(()=>(l==null?void 0:l.store)||YT),[g,d]=A.useMemo(()=>v.getDataFromSchema(p),[v,p]),[y,_,x,S,b]=A.useMemo(()=>{const P=[],I=[],H={},D={},L={};return Object.values(d).forEach(({path:N,onChange:q,onEditStart:F,onEditEnd:ee,transient:W})=>{P.push(N),q?(H[N]=q,W||I.push(N)):I.push(N),F&&(D[N]=F),ee&&(L[N]=ee)}),[P,I,H,D,L]},[d]),E=A.useMemo(()=>v.orderPaths(y),[y,v]),C=hG(v,_,g),M=A.useCallback(P=>{const I=Object.entries(P).reduce((H,[D,L])=>Object.assign(H,{[d[D].path]:L}),{});v.set(I,!1)},[v,d]),w=A.useCallback(P=>v.get(d[P].path),[v,d]);return A.useEffect(()=>{const P=!h.current&&f.current;return v.addData(g,P),h.current=!1,f.current=!1,()=>v.disposePaths(E)},[v,E,g]),A.useEffect(()=>{const P=[];return Object.entries(x).forEach(([I,H])=>{H(v.get(I),I,Ve({initial:!0,get:v.get},v.getInput(I)));const D=v.useStore.subscribe(L=>{const N=L.data[I];return[N.disabled?void 0:N.value,N]},([L,N])=>H(L,I,Ve({initial:!1,get:v.get},N)),{equalityFn:Od});P.push(D)}),()=>P.forEach(I=>I())},[v,x]),A.useEffect(()=>{const P=[];return Object.entries(S).forEach(([I,H])=>P.push(v.subscribeToEditStart(I,H))),Object.entries(b).forEach(([I,H])=>P.push(v.subscribeToEditEnd(I,H))),()=>P.forEach(I=>I())},[S,b,v]),u?[C,M,w]:C}Ii(Or.SELECT,FV);Ii(Or.IMAGE,WG);Ii(Or.NUMBER,AV);Ii(Or.COLOR,EG);Ii(Or.STRING,XV);Ii(Or.BOOLEAN,e8);Ii(Or.INTERVAL,tj);Ii(Or.VECTOR3D,TG);Ii(Or.VECTOR2D,IG);const Yi=class Yi{constructor(e){Qr(this,"name");Qr(this,"__data");Qr(this,"__parent");Qr(this,"__index");Qr(this,"subTrees",new Map);Qr(this,"leafs",new Map);this.name=e}static root(){return new Yi(this.ROOT_NAME)}pushNode(e,n=0){if(n>=e.pathBuf.length)return;const r=this.subTrees.get(e.pathBuf[n]);if(r instanceof Yi)r.pushNode(e,n+1);else{if(r!==void 0)throw new Error(`Cannot push node ${e.id} with pathBuf ${e.pathBuf} into the tree, there's already a leaf node at ${e.pathBuf.slice(0,n)}`);if(n===e.pathBuf.length-1)e.__parent=this,e.__index=this.leafs.size,this.leafs.set(e.pathBuf[n],e);else{const i=new Yi(e.pathBuf[n]);i.__parent=this,i.__index=this.subTrees.size,this.subTrees.set(e.pathBuf[n],i),i.pushNode(e,n+1)}}}squash(){if(this.subTrees.size===1&&this.leafs.size===0){const e=[...this.subTrees.values()][0];this.name+="/"+e.name,this.subTrees=e.subTrees,this.leafs=e.leafs,this.squash();for(const n of this.subTrees.values())n.__parent=this;for(const n of this.leafs.values())n.__parent=this}else for(const e of this.subTrees.values())e.squash()}static parentTree(e){if(e.__parent===void 0)throw new Error(`Node ${e.id} with pathBuf ${e.pathBuf} does not have a parent, maybe it was never added to the FileTree?`);return e.__parent}static parentFolders(e){const n=[];let r=e.__parent;for(;r!==void 0&&r.name!==this.ROOT_NAME;)n.push(r.name),r=r.__parent;n.reverse();for(let i=1;i"",renderLeaf:n=r=>` -> ${r.id}`}={}){function r(i,o){let a=`${" ".repeat(o)}${i.name}`;a+=e(i);const s=[a],l=o+1;for(const c of i.subTrees.values())s.push(...r(c,l));for(const[c,u]of i.leafs.entries()){let f=`${" ".repeat(l)}${c}`;f+=n(u),s.push(f)}return s}return r(this,0).join(` -`)}toString(){return this.render()}};Qr(Yi,"ROOT_NAME","__dep_tree_root__");let ds=Yi;function $j(t,e,n,r,i){return tn&&(t=n),(t-e)/(n-e)*(i-r)+r}function Hj(t){for(const e of t.iterLeafs())eC(e);return t}function eC(t){if(t.__parent===void 0){const i={h:0,s:0,v:1},o=t;return o.__data??(o.__data={}),o.__data.__color=i,i}const{h:e,s:n,v:r}=eC(t.__parent);if(t instanceof ds){const i=t.stats(),o=Math.round(e+360*i.index/i.total)%360;let a=n===0?1:n;a=$j(a-.2,0,1,.2,.9);const s={h:o,s:a,v:r},l=t;return l.__data??(l.__data={}),l.__data.__color=s,s}else{const i={h:e,s:n,v:r};return t.__color=i,i}}function m1(t){let e=0;for(let n=0;ne[o.id]=o);const n=ds.root();t.nodes.forEach(o=>n.pushNode(o)),n.squash(),Hj(n);const r=new Set;for(const o of Object.values(e))if(r.add(o.group??""),r.size>1)break;const i=r.size>1;for(const o of Object.values(e)){if(i){const a=m1(`__dep_tree_group__${o.group}`);a in e||(e[a]=jj(a),t.nodes.push(e[a])),t.links.push(Xj(o.id,a))}for(const a of ds.parentFolders(o)){if(a.startsWith(ds.ROOT_NAME))continue;const s=m1(`__dep_tree_folder__${a}`);s in e||(e[s]=Gj(s),t.nodes.push(e[s])),t.links.push(Wj(o.id,s))}}return t.links.forEach(o=>{const a=e[o.from],s=e[o.to];a.neighbors??(a.neighbors=[]),s.neighbors??(s.neighbors=[]),a.neighbors.push(s),s.neighbors.push(a),a.links??(a.links=[]),s.links??(s.links=[]),a.links.push(o),s.links.push(o)}),{xGraph:t,nodes:e}}function Gj(t){return{id:t,isDir:!0,dirName:"",fileName:"",isEntrypoint:!1,isPackage:!1,loc:0,pathBuf:[],size:0}}function jj(t){return{id:t,isPackage:!0,dirName:"",fileName:"",isEntrypoint:!1,isDir:!1,loc:0,pathBuf:[],size:0}}function Wj(t,e){return{from:t,to:e,isDir:!0,isCyclic:!1,isPackage:!1}}function Xj(t,e){return{from:t,to:e,isPackage:!0,isCyclic:!1,isDir:!1}}function qj(t,e,n){if(t<0||t>=360||e<0||e>1||n<0||n>1)return[0,0,0];const r=n*e,i=r*(1-Math.abs(t/60%2-1)),o=n-r;let a,s,l;if(t>=0&&t<60)[a,s,l]=[r,i,0];else if(t>=60&&t<120)[a,s,l]=[i,r,0];else if(t>=120&&t<180)[a,s,l]=[0,r,i];else if(t>=180&&t<240)[a,s,l]=[0,i,r];else if(t>=240&&t<300)[a,s,l]=[i,0,r];else if(t>=300&&t<360)[a,s,l]=[r,0,i];else throw new Error("unreachable");const c=Math.round((a+o)*255),u=Math.round((s+o)*255),f=Math.round((l+o)*255);return[c,u,f]}class tC{}Qr(tC,"__INLINE_DATA",{});const Yj={DEFAULT_DISTANCE:400,NODE_RESOLUTION:16,LINK_WIDTH:.5,LINK_HIGHLIGHT_WIDTH:2,BLOOM_PASS_STRENGTH:1,BLOOM_PASS_RADIUS:.5,BLOOM_PASS_THRESHOLD:.1,DOUBLE_CLICK_INTERVAL:350,NODE_ALPHA:1,UNSELECTED_NODE_ALPHA:.1,LINK_ALPHA:.3,UNSELECTED_LINK_ALPHA:.1,LINK_DISTANCE:30,FILE_NODE_REPULSION_FORCE:30,DIR_NODE_REPULSION_FORCE:50,PACKAGE_NODE_REPULSION_FORCE:50,FILE_LINK_STRENGTH_FACTOR:1,DIR_LINK_STRENGTH_FACTOR:3,PACKAGE_LINK_STRENGTH_FACTOR:1,HIGHLIGHT_CYCLES:!1},gl=new Ts,{xGraph:g1,nodes:v1}=Vj(tC.__INLINE_DATA);function Kj(){const[t,e]=A.useState(new Set),[n,r]=A.useState(new Set),[i,o]=A.useState(),a=A.useRef(),s=Bj(Yj),l=A.useRef(0);function c(){var g;const v=new Date().getTime();i?p(void 0):v-l.current0&&!t.has(v)&&(g=s.UNSELECTED_NODE_ALPHA);const{h:d,s:y,v:_}=v.isEntrypoint||v.__color===void 0?{h:0,s:0,v:1}:v.__color,[x,S,b]=qj(d,y,_);return`rgba(${x}, ${S}, ${b}, ${g})`}function f(v){let g=s.LINK_ALPHA;return n.size>0&&!n.has(v)&&(g=s.UNSELECTED_LINK_ALPHA),v.isCyclic&&s.HIGHLIGHT_CYCLES?"indianred":`rgba(255, 255, 255, ${g})`}function h(v){const g=v.id.toString();let d=document.getElementById(g);if(d||(d=document.createElement("div"),d.id=g,d.className="nodeLabel nodeLabelSelected",d.textContent=v.dirName+v.fileName,d.style.color=u(v)),t.has(v))return new zI(d)}function p(v){var y,_;v===i&&(v=void 0),o(v);const g=new Set,d=new Set;v!==void 0&&(g.add(v),(y=v.neighbors)==null||y.forEach(x=>g.add(x)),(_=v.links)==null||_.forEach(x=>d.add(x))),e(g),r(d)}function m(v){var S;const g=s.DEFAULT_DISTANCE,{x:d=1,y=1,z:_=1}=v,x=1+g/Math.hypot(d,y,_);(S=a.current)==null||S.cameraPosition({x:d*x,y:y*x,z:_*x},{x:d,y,z:_},1e3)}return A.useEffect(()=>{var v,g;(v=a.current)==null||v.postProcessingComposer().removePass(gl),gl.strength=s.BLOOM_PASS_STRENGTH,gl.radius=s.BLOOM_PASS_RADIUS,gl.threshold=s.BLOOM_PASS_THRESHOLD,(g=a.current)==null||g.postProcessingComposer().addPass(gl)},[s.BLOOM_PASS_RADIUS,s.BLOOM_PASS_STRENGTH,s.BLOOM_PASS_THRESHOLD]),A.useEffect(()=>{var v,g,d;(g=(v=a.current)==null?void 0:v.d3Force("link"))==null||g.distance(()=>s.LINK_DISTANCE).strength(y=>{var x,S;let _=s.FILE_LINK_STRENGTH_FACTOR;return y.isDir&&(_=s.DIR_LINK_STRENGTH_FACTOR),y.isPackage&&(_=s.PACKAGE_LINK_STRENGTH_FACTOR),_/Math.min(((x=v1[y.from].neighbors)==null?void 0:x.length)??1,((S=v1[y.to].neighbors)==null?void 0:S.length)??1)}),(d=a.current)==null||d.d3ReheatSimulation()},[s.DIR_LINK_STRENGTH_FACTOR,s.FILE_LINK_STRENGTH_FACTOR,s.LINK_DISTANCE,s.PACKAGE_LINK_STRENGTH_FACTOR]),A.useEffect(()=>{var v,g,d;(g=(v=a.current)==null?void 0:v.d3Force("charge"))==null||g.strength(y=>{let _=s.FILE_NODE_REPULSION_FORCE;return y.isDir&&(_=s.DIR_NODE_REPULSION_FORCE),y.isPackage&&(_=s.PACKAGE_NODE_REPULSION_FORCE),-_}),(d=a.current)==null||d.d3ReheatSimulation()},[s.DIR_NODE_REPULSION_FORCE,s.FILE_NODE_REPULSION_FORCE,s.PACKAGE_NODE_REPULSION_FORCE]),A.useEffect(()=>{setTimeout(()=>{var v;return(v=a.current)==null?void 0:v.zoomToFit(s.DEFAULT_DISTANCE)},1e3)},[s.DEFAULT_DISTANCE]),Fa.jsxs(Fa.Fragment,{children:[Fa.jsx(Nv,{ref:a,extraRenderers:[new BI],graphData:g1,backgroundColor:"#000003",nodeResolution:s.NODE_RESOLUTION,onBackgroundClick:c,nodeLabel:({fileName:v,dirName:g,group:d,loc:y})=>i?"":` +`)}toString(){return this.render()}};Qr(Yi,"ROOT_NAME","__dep_tree_root__");let ds=Yi;function $j(t,e,n,r,i){return tn&&(t=n),(t-e)/(n-e)*(i-r)+r}function Hj(t){for(const e of t.iterLeafs())eC(e);return t}function eC(t){if(t.__parent===void 0){const n={h:0,s:0,v:1},r=t;return r.__data??(r.__data={}),r.__data.__color=n,n}const e=eC(t.__parent);if(t instanceof ds){const n=t.stats(),r=(e.h+360*n.index/n.total)%360,i=$j(e.s===0?1:e.s-.2,0,1,.2,.95),o=e.v,a=t;return a.__data??(a.__data={}),a.__data.__color={h:r,s:i,v:o},{h:r,s:i,v:o}}else{const n=e;return t.__color=n,n}}function m1(t){let e=0;for(let n=0;ne[o.id]=o);const n=ds.root();t.nodes.forEach(o=>n.pushNode(o)),n.squash(),Hj(n);const r=new Set;for(const o of Object.values(e))if(r.add(o.group??""),r.size>1)break;const i=r.size>1;for(const o of Object.values(e)){if(i){const a=m1(`__dep_tree_group__${o.group}`);a in e||(e[a]=jj(a),t.nodes.push(e[a])),t.links.push(Xj(o.id,a))}for(const a of ds.parentFolders(o)){if(a.startsWith(ds.ROOT_NAME))continue;const s=m1(`__dep_tree_folder__${a}`);s in e||(e[s]=Gj(s),t.nodes.push(e[s])),t.links.push(Wj(o.id,s))}}return t.links.forEach(o=>{const a=e[o.from],s=e[o.to];a.neighbors??(a.neighbors=[]),s.neighbors??(s.neighbors=[]),a.neighbors.push(s),s.neighbors.push(a),a.links??(a.links=[]),s.links??(s.links=[]),a.links.push(o),s.links.push(o)}),{xGraph:t,nodes:e}}function Gj(t){return{id:t,isDir:!0,dirName:"",fileName:"",isEntrypoint:!1,isPackage:!1,loc:0,pathBuf:[],size:0}}function jj(t){return{id:t,isPackage:!0,dirName:"",fileName:"",isEntrypoint:!1,isDir:!1,loc:0,pathBuf:[],size:0}}function Wj(t,e){return{from:t,to:e,isDir:!0,isCyclic:!1,isPackage:!1}}function Xj(t,e){return{from:t,to:e,isPackage:!0,isCyclic:!1,isDir:!1}}function qj(t,e,n){if(t<0||t>=360||e<0||e>1||n<0||n>1)return[0,0,0];const r=n*e,i=r*(1-Math.abs(t/60%2-1)),o=n-r;let a,s,l;if(t>=0&&t<60)[a,s,l]=[r,i,0];else if(t>=60&&t<120)[a,s,l]=[i,r,0];else if(t>=120&&t<180)[a,s,l]=[0,r,i];else if(t>=180&&t<240)[a,s,l]=[0,i,r];else if(t>=240&&t<300)[a,s,l]=[i,0,r];else if(t>=300&&t<360)[a,s,l]=[r,0,i];else throw new Error("unreachable");const c=Math.round((a+o)*255),u=Math.round((s+o)*255),f=Math.round((l+o)*255);return[c,u,f]}class tC{}Qr(tC,"__INLINE_DATA",{});const Yj={DEFAULT_DISTANCE:400,NODE_RESOLUTION:16,LINK_WIDTH:.5,LINK_HIGHLIGHT_WIDTH:2,BLOOM_PASS_STRENGTH:1,BLOOM_PASS_RADIUS:.5,BLOOM_PASS_THRESHOLD:.1,DOUBLE_CLICK_INTERVAL:350,NODE_ALPHA:1,UNSELECTED_NODE_ALPHA:.1,LINK_ALPHA:.3,UNSELECTED_LINK_ALPHA:.1,LINK_DISTANCE:30,FILE_NODE_REPULSION_FORCE:30,DIR_NODE_REPULSION_FORCE:50,PACKAGE_NODE_REPULSION_FORCE:50,FILE_LINK_STRENGTH_FACTOR:1,DIR_LINK_STRENGTH_FACTOR:3,PACKAGE_LINK_STRENGTH_FACTOR:1,HIGHLIGHT_CYCLES:!1},gl=new Ts,{xGraph:g1,nodes:v1}=Vj(tC.__INLINE_DATA);function Kj(){const[t,e]=A.useState(new Set),[n,r]=A.useState(new Set),[i,o]=A.useState(),a=A.useRef(),s=Bj(Yj),l=A.useRef(0);function c(){var g;const v=new Date().getTime();i?p(void 0):v-l.current0&&!t.has(v)&&(g=s.UNSELECTED_NODE_ALPHA);const{h:d,s:y,v:_}=v.isEntrypoint||v.__color===void 0?{h:0,s:0,v:1}:v.__color,[x,S,b]=qj(d,y,_);return`rgba(${x}, ${S}, ${b}, ${g})`}function f(v){let g=s.LINK_ALPHA;return n.size>0&&!n.has(v)&&(g=s.UNSELECTED_LINK_ALPHA),v.isCyclic&&s.HIGHLIGHT_CYCLES?"indianred":`rgba(255, 255, 255, ${g})`}function h(v){const g=v.id.toString();let d=document.getElementById(g);if(d||(d=document.createElement("div"),d.id=g,d.className="nodeLabel nodeLabelSelected",d.textContent=v.dirName+v.fileName,d.style.color=u(v)),t.has(v))return new zI(d)}function p(v){var y,_;v===i&&(v=void 0),o(v);const g=new Set,d=new Set;v!==void 0&&(g.add(v),(y=v.neighbors)==null||y.forEach(x=>g.add(x)),(_=v.links)==null||_.forEach(x=>d.add(x))),e(g),r(d)}function m(v){var S;const g=s.DEFAULT_DISTANCE,{x:d=1,y=1,z:_=1}=v,x=1+g/Math.hypot(d,y,_);(S=a.current)==null||S.cameraPosition({x:d*x,y:y*x,z:_*x},{x:d,y,z:_},1e3)}return A.useEffect(()=>{var v,g;(v=a.current)==null||v.postProcessingComposer().removePass(gl),gl.strength=s.BLOOM_PASS_STRENGTH,gl.radius=s.BLOOM_PASS_RADIUS,gl.threshold=s.BLOOM_PASS_THRESHOLD,(g=a.current)==null||g.postProcessingComposer().addPass(gl)},[s.BLOOM_PASS_RADIUS,s.BLOOM_PASS_STRENGTH,s.BLOOM_PASS_THRESHOLD]),A.useEffect(()=>{var v,g,d;(g=(v=a.current)==null?void 0:v.d3Force("link"))==null||g.distance(()=>s.LINK_DISTANCE).strength(y=>{var x,S;let _=s.FILE_LINK_STRENGTH_FACTOR;return y.isDir&&(_=s.DIR_LINK_STRENGTH_FACTOR),y.isPackage&&(_=s.PACKAGE_LINK_STRENGTH_FACTOR),_/Math.min(((x=v1[y.from].neighbors)==null?void 0:x.length)??1,((S=v1[y.to].neighbors)==null?void 0:S.length)??1)}),(d=a.current)==null||d.d3ReheatSimulation()},[s.DIR_LINK_STRENGTH_FACTOR,s.FILE_LINK_STRENGTH_FACTOR,s.LINK_DISTANCE,s.PACKAGE_LINK_STRENGTH_FACTOR]),A.useEffect(()=>{var v,g,d;(g=(v=a.current)==null?void 0:v.d3Force("charge"))==null||g.strength(y=>{let _=s.FILE_NODE_REPULSION_FORCE;return y.isDir&&(_=s.DIR_NODE_REPULSION_FORCE),y.isPackage&&(_=s.PACKAGE_NODE_REPULSION_FORCE),-_}),(d=a.current)==null||d.d3ReheatSimulation()},[s.DIR_NODE_REPULSION_FORCE,s.FILE_NODE_REPULSION_FORCE,s.PACKAGE_NODE_REPULSION_FORCE]),A.useEffect(()=>{setTimeout(()=>{var v;return(v=a.current)==null?void 0:v.zoomToFit(s.DEFAULT_DISTANCE)},1e3)},[s.DEFAULT_DISTANCE]),Fa.jsxs(Fa.Fragment,{children:[Fa.jsx(Nv,{ref:a,extraRenderers:[new BI],graphData:g1,backgroundColor:"#000003",nodeResolution:s.NODE_RESOLUTION,onBackgroundClick:c,nodeLabel:({fileName:v,dirName:g,group:d,loc:y})=>i?"":`
${g}${v} ${d!=null?`package: ${d}`:""} diff --git a/web/src/color.ts b/web/src/color.ts index 13eaf96..6edfbc0 100644 --- a/web/src/color.ts +++ b/web/src/color.ts @@ -22,24 +22,29 @@ function colorNode (node: FileTree | FileLeaf): { h: num return color } - const { h, s, v } = colorNode(node.__parent) + const parentColor = colorNode(node.__parent) if (node instanceof FileTree) { - // this node is a tree, need to accumulate colors. + // This node is a tree, need to accumulate colors. const stats = node.stats() - const nh = (h + 360 * stats.index / stats.total) % 360 + // For each subdir in the parent dir, rotate in the color wheel an angle proportional + // to the total amount of subdirs in the parent dir. + const h = (parentColor.h + 360 * stats.index / stats.total) % 360 - let ns = s === 0 ? 1 : s - ns = scale(ns - .2, 0, 1, .2, .9) + // The deeper we go into the dir structure, the more faded the colors will appear. + const s = scale(parentColor.s === 0 ? 1 : (parentColor.s - .2), 0, 1, .2, .95) + + // Just pass through the HSV value (V) + const v = parentColor.v - const color = { h: nh, s: ns, v } const n = (node as FileTree) n.__data ??= {} - n.__data.__color = color - return color + n.__data.__color = { h, s, v } + return { h, s, v } + } else { // this is a leaf, just show the parent tree color. - const color = { h, s, v } + const color = parentColor ;(node as ColoredFileLeaf).__color = color return color }