From 354ecd33a68e85792d3d9a15b883d8ecacc9e02a Mon Sep 17 00:00:00 2001 From: Michael Zhang Date: Thu, 27 Jun 2024 19:23:36 -0500 Subject: [PATCH] ok it kinda renders --- README.md | 15 ++++++++++ bun.lockb | Bin 64780 -> 67374 bytes package.json | 12 ++++++-- src/App.module.scss | 8 ++++++ src/App.tsx | 65 +++++++++++++++----------------------------- tsconfig.json | 28 +++++++++++++++++-- 6 files changed, 80 insertions(+), 48 deletions(-) create mode 100644 README.md diff --git a/README.md b/README.md new file mode 100644 index 0000000..a2b0ae4 --- /dev/null +++ b/README.md @@ -0,0 +1,15 @@ +# matter + +To install dependencies: + +```bash +bun install +``` + +To run: + +```bash +bun run index.ts +``` + +This project was created using `bun init` in bun v1.1.17. [Bun](https://bun.sh) is a fast all-in-one JavaScript runtime. diff --git a/bun.lockb b/bun.lockb index c178a16eac9b2de655923c8669c82c9f69240911..64ca81e61d79838efa94317c25edf1dd31f86924 100755 GIT binary patch delta 11640 zcmeHNd0ds%)_(Vqqa5VOsBkIKe(1z$BZ>v}Hwe^L>*PBZm zfu)mo%KQ__Nbm+pDl5!N&nO1Z2JVopD8>03RsDqY3HiC1l9U;P3|yHpVbk*S$4gZ@ zNixE26_Cpzzc_b%R^c$njTAW}KQF%!`B~|{MOl&+iiV0JvoJkd+Dtlu757qoo%x7s+WO#vL{2dd?E&l?@bAJlRv9VK? zmjT(qOdyX~mMW(J<(>n%p;jPfwakJFJ%OP>mY;8{G#t}hTvCw5@lq#Dtp1Lj_TXGjvNpe)bjY{m#S{-kGiydr+!F{J#zL>)4$2SQ0{%F<&ub@3tR8&9B;@^ zIQ@0X>cbn)uPj+N_QPD->ekzJU2s|Z(C4#8)Aw$@MGnO`wCNARZ47m8Xcc#;x}nX` z9ouRrRP91ZMvIt5@$NRmY2=|rWqL}Aw20rR#NDPps*|KR>TI-%`&8#{({-#zos5b4 zsr4kOBRzDt>UV?d&Ybv(>WnshdlxRin$h4AWp2Hk2PcNh;JVAzibfWFQ*5@dHClB~ z>uH)tqF6%J9yW2F>O5@vdi7PMJ|0|OHWSZNwWm#g1#%~r^*#+`4wdx-mq<0<2`*p~ zzzve~ z0ZUevk?NY-41tX$sVmwqcz6uyka%1mA*^;#wb>@VraH4te+Pk&I5AuG z5eWUBGB*iaZ<(tBr)UMX93?LqoMN{aoTB~cvDS>e5kUce+2E8C72x{Ic@H0Jld&LG zFW?lrPrxbu%(&|*c^Tjoe-+@A5>mNwdS|%D6Xj;2OLwG1^gOSqN*^umzl!1F!mFiKFuSM_IUXpBFR1Bf&P@7msbx3bf ze0!TNJdCEbPt+C3pg$NUNj<2uuhsAnTsOr#)^L|_NHnv(mA9lYoA`k0!fXbw2uVtM z+=79RCDdskNH(p!_>k(tZF;XrN$SiSm7za4)}pnc7Q;f$*Zk<;fz*W_hFW!QQPe3i zQJ)-zk)qC#R{e9}Y}^d}iN~BSnw{2!S`9Ylv?}#8@nkR*x8i|)C#p~!}=URBWWOkl0^txjqrYj(FZctXK_$Ck~HC6fMekxqy} z4nkMX1-U7jP=n||)1njglTj~rkZ7y^eQ<+iE(kF{K<0|T*=6nsxD=W5z%xoenHvsH zvD*PowlnImU2>RnT?lT^h*I3N`Nl2bR>V&bN|#jh2J*$oUG-rB7bBLfgmINyjmjn5 zSJ<Ff~68}l03a~1zl9cV97EzNBLr8M+h?cV&rl?K-?AFK;-NHgX{;v zFL$^30Y(n`wICkib$D==uXPF_Ls6_( zWkxpKpvsIazpmm&6*sB48ORqShsql&ZUb_>?+5Yq7}ffn8H)bjlDR<#)N+h09|Um& z4uSZ35_u7QD(9k68p9|kEin*})RJ^nRsUb8qqKNG%8PeZ$x|-*Ir{-!Q$0M1oPVA3 zX=c1%DL3y6mT)n$_DdE2uHrvb{0hkSw^g|o$QL7*`x?X(`vZut{|71~|5t|WzK_+sR8JwSTUUv5sgfha@n#d#lFPl`A$<|)icl}#EGIE-I`r;c4Pe;cW zJQzM|-To!JG9Q-ZO@43br`?wRRCsjO(6gTna6~-2?90D3JLh*{&quD)GV?2weh;k- zNt?16QzE24JpKSSp!g&Q-A*#nnk2h0P%WgDU5(VQt6emtRb3s_yPJ_7LNZcvHwXO+ zX;(M9@Sr+KTe}-6t-D=#(YEdmdbWp=j6Lkahf;eu$hD`DY9KWxLr(`CgfzaVUHDNo zq?}$xYSzmxOqAQpLH@msbODl?OuZd+7Shb#cF~N^L7JLuq_AYW2&9r^2es{Eq|YI> zppZTe`V`W_K6cTHu0Sfc8>zG1E`n*k-9a7u8tGd|Z79Ak`Uh!EU%LpQT1YGVp@04C zB9vD3L;w1te~`i`xxYh%(*~pwRM#K98-U&ou!|_#HozgGNj&WkF_en5163l8B}0ls z#8Em@3st9}Ujxyvfp!s3xdR=d6CFcpCDR~>NT7*GJJUI&iPYj5hpeH5QpeVH<9+Dc!xvurX@&|sTOG;N_y5I?6eAL zU%H31A0?+cM1R_VbO6<*q9;Sqlc9EzLfeKq#6S|m9AXfqB7KG`kq#!qa0lMN(vdo- z8tJp-mF5tsl#6sI9YZ>dOd}j(I88*FM(0LgZbo8mM%wWvT{03q8HJueN~e%f=n15S zqwFGsu0SeJM^Do2B8%pyV{S%cZXjh-{AkP#q&1`MBA03*t<1pOWZ1|Y>$Ns!s-~aSM^!%yq!($gu8#l1DUYnrl*Khgg zH}tmeopbwOZpP0Cq+@>8Pgm}s8;+44_>Lo7MPnkG0 zbhVJ5!IT~F^(P&-etLoR)`sG)Zrf8P((8dk%6y09#C&_o`mXKf&y$OHShiNS`0D9b z`dYKeY$MEQ(8OI!SM^KE($D62Rl0$5!i%7Rn$Yh6jgJvV$N>`9>qo^qkv7P24-9a~z?xgss0|sjw{w}Re zK$qB);}g2=Oh_5BXx=&RPrjJf^>}9Rl>@)EzixT3CL!aQnHOt1R4&@Rdgbb2K3)~0 zZqC}9^0#X*clv63+R^(zE-Fu-j<41>e2Z{F9p|Q6m@{fWH&vs>#;T|pB&hlHspLBS zf&MGJq&B3e8GdYND9q2xn^Yi4bF0E;Y!nF3i!*)n*Biq`E0w@@Rd1CB>ER-iZan9% zpMb9y2DsR$cR~BT=~%;vr42pF)!269jZ*!eQPqvo`#QISJC$zV*h#N!P6+?wk#cb+ zYtU9HjRjnq?5U2_$qKr=xixuiX&dGSHNR-PgZRbc4(J=ux1hVA??B&!?t%V6>09!n zJ_dIg^a+UH%&I~BYRHe2%RsMy`1PGD9|0Ok;*I=f_@X7@8ZQwFSfrWIc$t4E{7R5X8aFuf8Rq?<2jZzhEXm)JxHCL$1`xk1s=iBQ2W-d+uACKI89U|ztkd$D_XcsJeL-9? z>)4j_xM9q*4Ohr{?2jA9zPKa7pjM!kpdkL1+y+cr5F4{Yt=H^GYZ$-J@f1aXI4~$> zyC03(t~Yd1Gi)?|yUo}g62Ag=1r4X_?ZZ+>g5#LtoIFqtC>xXo$^eZ9jRLXLbWkQ} z42X5Pps}EFAhu)u1W*`g8jar(kvB?aTKlvtpU9T;wa>}<4EVITma$- zp>eq z8$hqCxD&Vov>mh!v=zi_l4E@{=ynwnTr=L4=%t+@ewc_d?PoeqF(NiRGCYz$omTEN znK|58ul?rds>@3+&MGR#9MgH|L!ozvzG>rNui32zz3VDQM0E_036GI1^k}CEk8`G7 z?Km^sVhN8U`>t4jZ3ESQRMhFXF&Ly-y8`g2_3AE@nR|qoEgSgdmT}8QR}9gK5s~51 zG2zkDPI`Y=40hx9VWl0%xV`m7kIR?q7wAN&P=2kI_4M?ca{^k!Ik(^N>-)Ed9W{mO zL^(ZV`=-Cnsw3Bm)w-TK+Efv39sqOh&i?mZm+0KSe5eyKs`)UwR}o{@j#Tst zn)9Gl_dau+`XaLJHsQz1)ZH<7Mp_7d6;U2*@$}XX$r&iJ*tVn?7W{Sr-ys`DSjxk%G<4` zzS3LtrmV`}M>}s4_V&JJ*`Z}II&p?}RGADPz>J4?GhL_(b+cm2U`cM3KOQs9d;0}w zheIwmil5-!*q*Et7Ih$+8R)sa(Pr%wNu9CfzQ$eFf3FjZ;RHKcSq5F)Yr<{%&fb3i z+|!CZ+|v#FX8USCV{5-1`-&Fs6t};*&gM?f?k___uk4Qzm&ka)6sMgC+4tz1AKaS0 z6YL^7gd@lhquQB~l+}0dc3FS%52vP`k%k}eH*1GXs)Ak8B5yzM<21;o#Rp8W+M$$} z7C(ILKr64WoqFxq%C93<&Fb*lJCB^2^Yl3yr5$szwAs}$`u7idI`!H?n5DA=QfE#6 zxvf(Z)`;34^fzlKXKW2p#uS#H%XAuK(#V4*vv$(P9xM9&=jN(xYlqoOZ@$N6*}}LR*{HoO~9Eo$MLi(D%MmlTEK4GMTlLK;f_hz7pGo3TXgn*S>TLKgUP8mP0bFQ#1*m} z4mG@t8+s#@UrXZ-n|%ItlHQ;dhphqHX`Qw64tLx7u+bKsm=zlyg*{J-4y3z>qjg;Z zspVUJ#XQP?%Vh4>Tv_UFYi?eBuECdB+asc39VJN@XyaQkX6>v`=O2$&zT+921HDDj z-=KSMnRL-D$-TzktQ{qqQ9td~&I>kAfLV+ZOY_K9V-gQ3wFa9`E4p#SKeksZrOs=y zDJ5x5*CfC=5|SIAV&`4iF7?uYEo%by_c{UOQrx^x^druMOK$;?#UWX-7l-YX_a&M>W1`__+25XNkL1 zdejuBojY3cTlQgxe)n%qy>>!r^X}}A=IOrb>eQIq(R)YzQEpOo=lNbZU~@QNS^Ovvz!HUshq4GuM}`a~h1L0mn?S+HtGen7-C< ze%wD+J0sR%)V0d*YHkEMi~RNADbD87ODD8JmnSITuO~=}1ECaDQn?lXD@S%%svX(V z&PnO8DDa0Hsdi{fJ1K>w-Z31DJyQDT`yw>aSYy%Q9kl~r+9@k}dx(w;@9-yOzxMLL9v>hy=?)Gj`EUL zih9OUqm%w|+Q~9o*f!U(SD*UMSyVfFc4&2$f3Ia@PdGKHu{8XozuVb&m4(*!J(_iL zpx8?nPX^)!aZgUYP6Z+-3h6~kk<*ECx&-M7syr1qY%iWz@Fr0<#63Rj#SPcqE-uQD z{T=|MfnmfS>Z7>lpj4 znA+%%XWvtrv%J2bJEwx(`0Qa(MqzG2F?pVDTyONG2~|&>ULlO^S9y93A6rC~XU&Zj zDI!eG4&!HMOI76=YZNs+Z>IJ48w8*<^hm>a_T$2fv!}5j*Fi0A1+>)!)k;>#wow)~ z?jmPIOevz2t1W{jFrqrJ)uaiTxf!{tSF|kf$qW>DQba4Gmwt;a{oDG+ oDMe6DDGHOruj(^b delta 10181 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 ({ ...node, id: nanoid() })); const links = [ { source: 0, target: 1 }, @@ -31,7 +33,6 @@ const links = [ export default function App() { const svgRef = useRef(); - const simulationRef = useRef(); // Resize listener const [rect, setRect] = useState(null); @@ -46,25 +47,7 @@ export default function App() { const [simulationNodes, setSimulationNodes] = useState(() => nodes); const ticked = useCallback((simulation: d3.Simulation) => { const nodes = simulation.nodes(); - // setSimulationNodes(nodes); - // d3.select("svg .links") - // .selectAll("line") - // .data(links) - // .join("line") - // .attr("x1", (d) => d.source.x) - // .attr("x2", (d) => d.target.x) - // .attr("y1", (d) => d.source.y) - // .attr("y2", (d) => d.target.y); - - d3.select("svg .nodes") - .selectAll("rect") - .data(nodes) - .join("rect") - // .append("foreignObject") - .text((d) => d.name) - .attr("x", (d) => d.x) - .attr("y", (d) => d.y) - .attr("dy", (d) => 5); + setSimulationNodes([...nodes]); }, []); useEffect(() => { @@ -72,13 +55,11 @@ export default function App() { const simulation = d3 .forceSimulation(nodes) - .force("charge", d3.forceManyBody()) + .force("charge", d3.forceManyBody().strength(-500)) .force("link", d3.forceLink(links)) .force("center", d3.forceCenter(rect.width / 2, rect.height / 2)); simulation.on("tick", () => ticked(simulation)); - - simulationRef.current = simulation; }, [ticked, rect]); return ( @@ -89,15 +70,19 @@ export default function App() { {simulationNodes.map((node, idx) => { - console.log("node", node); return ( - - {node.name} - + + +
+ +
+
+
); })}
@@ -107,13 +92,6 @@ export default function App() { ); } -function ForeignObjectWrapper({ id }) { - const el = useMemo(() => { - return document.getElementById(id); - }, [id]); - return createPortal(, el); -} - function Counter() { const [counter, setCounter] = useState(0); @@ -133,13 +111,14 @@ function Counter() { }; return ( -
- +
+ {counter} + diff --git a/tsconfig.json b/tsconfig.json index 6cacb64..238655f 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,5 +1,27 @@ { - "compilerOptions": { - "jsx": "react-jsx" - } + "compilerOptions": { + // Enable latest features + "lib": ["ESNext", "DOM"], + "target": "ESNext", + "module": "ESNext", + "moduleDetection": "force", + "jsx": "react-jsx", + "allowJs": true, + + // Bundler mode + "moduleResolution": "bundler", + "allowImportingTsExtensions": true, + "verbatimModuleSyntax": true, + "noEmit": true, + + // Best practices + "strict": true, + "skipLibCheck": true, + "noFallthroughCasesInSwitch": true, + + // Some stricter flags (disabled by default) + "noUnusedLocals": false, + "noUnusedParameters": false, + "noPropertyAccessFromIndexSignature": false + } }