From bb93040c055403b7cd93a6a4232ed15f731183f8 Mon Sep 17 00:00:00 2001 From: Nicole Rappe Date: Fri, 11 Apr 2025 16:19:35 -0600 Subject: [PATCH] Added ability to remove nodes and disconnect all edges. --- Data/Sounds/Short_Beep.wav | Bin 0 -> 9702 bytes Data/WebUI/src/App.jsx | 55 ++++++++++++++++++++++++++++++++++++- 2 files changed, 54 insertions(+), 1 deletion(-) create mode 100644 Data/Sounds/Short_Beep.wav diff --git a/Data/Sounds/Short_Beep.wav b/Data/Sounds/Short_Beep.wav new file mode 100644 index 0000000000000000000000000000000000000000..015e1f642e91b72578bca1c318f7a7c0d515d843 GIT binary patch literal 9702 zcmZ{qRdZa~l7%yK?<14Uj54!jCYhO;@7s--n74VGA2EOAwn=7cQ@hP9vn?~KZJ8OW z&d!{*PnBf%otSW_qivU^QYmxgx7MoV^JdR}(1&QvwAHiz^S}PPdkZ3B{F+%w^gnBv zgj&#l{PVy6c>s?gvQp`+{bj7q*&#k})%@H( zi_;cTrh{cdnCsW1i<4>j5z>d+QzOdL8+#yE^ce54-*^`v4OQ-bc&b2LjDP4$xvy1xly=!~vPX~66@Ex> z@Le{tcHGBC$TVHdYiOQUxFMmNYpFtC=sDlEb8=X>(q`UIr|AYgr4OdkR6EH49V4@J zIbP{mHU_`zgg-U@NYCgdouLC%Nn7a0KX3ALe~JWMCa!m!RQ)JZ&ydRlAz`FE@3dsJmdWT&p@ zy?jEi$Rm9tsWy@h*2hM=>FE-`I?Uk;9&BAPB*LGyMymBJAHwsh#Pd6Y=lP62Vr-gG z7aB<8Xf~~+*Mo7!0e$>}S8K$rEX-<|#oA4lC~yHBqvM-8bR9y5Zb(qdZ6^TULsJYVKp1;=0c zh27>0b{Jn{6aQ`}`8qwZccP(*>lFIAF*<{m%gQjzjSB;$i!~Jr9|W(np7sawoBh^s z(47mn{9pNx3Fn(7UDJVXyw2uTw2WrZXzR-zsR;$jriM=1Ud-lpIieT%uD#%I=D9WX zuyUS63v8_{!dwrhUeuNv&<}cL_xKVOrzRY8SM&kBk$hvM45l(} zX(C_ruQ)Y)n6_cp_G9OYQ^QRyn;M>Fm>QeO*iPO$yaXQevSxX;Smg1Xrt{$)G0kMEFgRFdZ2B#+W7?nKz*HiRAS&v4P* z3$^my5^iHXc$iJ%g|-eKzig-0;xQNT*d6#cd*p;&p-24I^4!?kQ(qos(|D<^qPbEL z2DxsbxfA`wf7vZQM~7?+SK5BYcG^?=$k}$<03K(vWTh=DY$tcJCY-&_c8yQjzQT55 zgKpDvsFq_)jSSHWnP;nQv745T@O?r%Zp3+eO%Le`9j86K-gaWHFVTH^g*k74dGAHT zX$mc(b-W-AF`=+Esci??Ng~w1exHj!I_amL{uowvBUx zFcZy<_>(>3TbPxDyu~W<-?MsCYM}JY&Gm0n!=tI6b--sz3z|+Rsb15mxSiCRv7LnN zq;+_9Q}8V7w-e9)5+Bu_ZhhFz$FUFCPJEXQt)1%=py{@lpy@op26LIVa4!9vJWs3T zJRP>JvRQwZ(|Vnu>15QDI^$Z74Kv*esQN4(i%Z&BOT{d^o#9lnKes8_77o#Qxov;N z+ZkH8G8;@2XdbPx#ke3N7@7_ZPW25xqN{X*_R0M`$t_IR z`GsMU46`28hD-DtH2*GF@t?XwHrO6J?yiQ1f~ld#)Is{DBmMNSL{{4zs-VH#O`8j* zMldyY7L&ZiRi^v>nQ%j%*#|S%EOeHEHul%4iJHzD-X%|R*Gf+1_9dHin;n)5dYfM` zwzE#t-F$_nhbewUzE{#NG@zWk4)+~2op;;6@Ntx(>HONV?R33$I8Wup_&4))f|P5S zv{EP7PPwD!1=}f`bf28EYq%xvaZ^gE6Za3J{mgWkUztMFbpUtaX2JZ&^r?fU%K_cY zxSjaEs;$O8F(Ajfy20sqH#e+uOLdxz((HD|*BN*33N~yHZQz~Zh_4EFq*lLjLeO*? zY7@DBYOJSgo0j+=0VH5mbd+}~NWd}@(ANwSp!STZNv8c++;Gj0xd}8~%B%&sNCI@5 z&NE1WH&aFe{4~7x7D~A@XCz?D3&h0(tP^I*FjF9|aLVsbH@R(!sbOrVeP)NxSjI!F zg0Y={*K~Ok9^k@2(`h|85tl&I z`6Pk3ZgE)SKmx8jU~0(Q7kPncya3WDPK{pU;?x*4T}R7IT_!7a zmSAe6i-H6cB%n9sjP938EowSQC)0Fn$snoFdg7wK)B)QB;({Juwd1^3L0sX8s|p}4 z194ev>Pf?RvMr#0&_bFFeeYqdrG7iH$vbVm?A7CZl^)^qqy$ZuzFH)%bdHCnOE+sC ziOXuJn$PJ$w>4~*19qCB>HJZ%?eqilWBu%~LO@(P+V#iHDz!lG`N>aBkGGTW*mL?y zo?BTNmD5C;&$yj3RfkJ&Ys(FBBVS`1@jA!tq}_5Xa=N~xAJQPSalOJYHw8ZzkO25* zsCDPo;GJ(&t9RVR@CSaD8)zRx(-|bd!5ZU+_pKuVn#1FDpz9i%G0Ug)S#m3X#(~of zB%o)Y@Xz>DLDLJIPOEGw2p^hG;B*)CEkCAfdcy6)SJ@#)(hJGm^o4w*#ImW0#6{~2 zQ)9!Vm$tz({_b9Bk+^8RLDLDEE^jo)*iPz0ATC-`&~$~S>8{aD(mQ2Yn^y|WWnQTKj<8=E5&A(?C`A^#cecFqO zyJ`>VEvMFqI&l5eggH`SgQy#|;G(9(Hyq-vwwW;Gvuy=0w;4Rf z`V~lk-rHlo4sHgg*AbUKXH1Q?l<=JMGqL7F4@%3G5r61_c}n+ zF;%?{noiJkKR<=0Q<1prIp5(6dYHHKrm)YSO0PL^dO_2zpMbbzxvjv>0jK*e0o#dN z^i-hf?m)UZ*_uD-!RfeJ&~$6gATFxlxwZ;4G>t}qjBq<$8ldTR#g5BfTTeT24=>6+ zt>y2yk*%et4b@4>!aQzgI?2`FPR8pTF8V)H5SQ+e<9b;h)@eFr?k+5bznv=+Xoz(a zObvgrBBxuX=><-=_kyV@xac|(ps@sZ=b8p}AM^>`h@1{~*h+`xyjBaQhQaAnhR^(O znr;m#A32?_$nmfnjIz`H;-VRvPQw|*rEB3=;i9RBLes-nfuwBMesx5JNO~44PS9pu$?sY--*jg+>i97zaKIejSIC09GPur$hk(L9dd(_a41V` zH8g6X4dL$AlA-DJ0vdK6TDFZhQReP2t?xl1aCh2|$MFBrbo)Thtf=X>#o+EzxVwO< z;TGCe2J3hM3HYVyG&d^rf#ZdXwl`7JwdkS?n(pADr6ja=J$0x|)&=s9u)twE!R>9R z#4_TdD#?foQv(+bYRfd8;G#hp;B*3U;f6rde-c+=I~AG^TDhrD1)9$FF4~~!VFp}l zKadVIowMzPKlxoZa^|A>4!yvw^V*WTQ@Kq5Ib|+dMuc9zUE09sQuraegssfBlaJ{o z_aMB&)@HX8kIQbS%(n?#Ze_R)j^Lv8w!?N3wli{iB!OSE7yRs(L7`{!cpJ!F4cUu+ z+?ml1#k-b30$0Btpx@hoMC(ekApXznNcJgLig2R!x>@WJl^%+;xbX<>V zxFUbcxZvxd>6{Ul-gB?QcWGd4s25mfGE$_q0^-tgml0QCJCQj3!ML4nU%++-5ZBL) zi)J9LS_M`eFUVe`MPT_%nY*)tQPbr>I1SFNCjmE5$I@(uyW^QQn)_QvDn<4I7fsjW z)P#+0dpPVagxm6hzM5mWXb=;o#@6s+L-rDh3zGp&=LdR8ju~7uK91QXWHI1$&NQ7y z;IYv3pTvdF^)+g`ou@x|yKcnS%3QR(2Z@y8wqQFA*$b`Y**ew@gr{hxhG_?4rw1hDxKz+hE+0G$MfKLJCU)0xVSoQC)_>U9V4+bkbwRzv6B_ZN1^FR zV~U!Ngr=zJV2E>8?VhI~0c(Lvk!3GowObNE0=OjY2rgP*yN7z2j>lw_kc?`Tz(pH4 zy)ZR4nHC91z)cF^bZbQkQYN_Qy6goBRFSwOgvPETa?R2Dx9o+R6OvJ`v74N6x>mY_ z>6zqK?pg9F5I2YFV>@|HSm}|B@@VcCI`}4O>ffc0{IxVAE&->zi}^bxwYje)N!kj} zq}+1A#3jK9;Xy6ptl>?veijARtd1LCSnMtNSS@I%rp8I2iN9dU8yqLE%b zg-^DaKpTh)=@zC2iQ+iRI2}0#lF>R%FK{}3QuWEGfz!hrw_2BQmW+aq8Y3?Or|U1- zi(Ujx)e=a6>a&-~=>`|AJ>aYpPy$@EtI8iqc7}}8&e%w&%W}jOj>USJPa> zcH)+_K=y;}L`qwjno7;G7kU;s9n;oE}{?@{gI6N;b;ZWTfliB8I68O zvy7`Q83hX!GcJ0E%(w}6)V|0z>s>UQPIf!tm(g3;8L(E7xERT39dYSE8ehlhF;ACH zpdDzsdjdyW%+u{KoGwTpy1P0~M=ri5S)7}afCRW5bo&RgbL8of1Qgi|9}Aa~2f0^1 z2Zx>I=~2^h2QW2MF5T0XiO+p0d65>U#x}-0-LACWGlFxE~XV|VXU`|#OGh4NT8|6D9lJqkiEnfCf%BB zNe?(=i7|mTi+Oq^0h|^5zhNUZ^5obK$2A8 zN2Cu^9BwDlhz68Kt)c8f!QbzOFM=Q9*jveO_mbUibBRk&G4LYp<)Xohr$-ORS)txE+o(yKNfOckiZg}j+D4h zmR6vJVN8u6PnS)$1D#LS55Ze{k(T3TB1wt~G`o4Y0h_BIO!qhnMBiFf(Vs8<*lbPV|;)RMWOl%c7OQ7{59BC>2 zOzf6LvW27Sh};7?Z{$aJI>6mgc01EM9)3uQiCr;IFRCCse}gpVk=VtK6pdnbJEfRF zYl+J`(oAbsBk8N)A;{#>4@DB7x;%X|SoL(_cH-+7vlmSAvasCE3S$^)1)eYRbbSUD zhr82CL38~veSooKzVL=mu#11n#7p^PIxVX>{!QIKD z01~i0NbInkbQyioE0@EpBTq*!io}lB(l369vyQZoy`YEMhn@skqP=5R1`5AX_BRpVJy&onkv_YoQ-1G74H4?t;W|oX+BvTqIkh@{L3A@6*Q)oKC;vt7NY; z_~T{xCeU>1j-Pskn+JYGs~CF=c>a>u!Z7$zj@xcp4~EPVX#80oe}_zf(cPh0$JE3w zI_>6T7yXTq*cF;}LIPcw8jWd1WBGZZ&|AdLpF2}iGx-!SHH8a>i+jl7cB0Y7)KGKj z8nTX*R!LFQU3+wzA-qK+con^UY+<13u^-|{wn*%(*sP~(eYTyk^T(fm$KNBdgZ}SI zHzfP=C;T;iMDLI#f*-ZFADN%(q3JY7kR=v;XZY-&=c|+R=^-TJU=+(3MLvOE(8ACF zBrda%rf2PK%o5Swq9fHO1x|OH)9o&6Z>g5PnYfnuZY4u<6&@XFY;Oy`6Fq1?eeJXE zPWSKz+D*rBM>9W!JU2^{z>U!KLT_PZ*3$X(TkWePAkl5Ks zo933LXcco~OVBEMObxQ;8dn{%snIR|Q2wm1)*4V{F|mu?UDR}$9!9#ppwPyoV7MX) z;6fMsA$0oR3!0AX1c{xk!Luv2ig?DzdG$W75)!+x-tSG1`>W|g_cr7m_z`=OxjR~| zNTBnBO1kBmCz5_~;KxFq&h^_V=={;sX4y;Kc53E3kyd~okx^%f9Wv|f=;SZN1UhOu zqlLk{3C5$hTpbpnksa=OhqlNI>p4B$<2UFoLwlRMU-CNt!y|i%u7f9`hh9euxagt< zQ-jv=ew-Tkr>u)kulmOU2{dP#&L9E5BxEE&ATEl2=rep-wJ%Oh?4k{=V)*DOE%luP zy1V$kmpT%N?-b#zg@Fe=mA&r;WE(DcB+%{~^1mWKhPmkPq3Jq|dI|cW1XB~;9b-Fr zgY5=KUdHcZKLmHj=tz-lEP}tscA~}U7CZl#r^gm1W&%{N>9JLenvMw`%`Zq^qCr-v?nPzvJG6}*JeDoXwBEWGapiTx&Yo>`U{lm57! z0^*9Vv#gCte<=4zDquv~Wx5m;Iod!1X%kQ313!yXgG8(nzB6kT(dB%J-5tC+ z-uD8>wG!JoMY6O4^a|n%4>7|?>~sSfuWUQ}@ma%;-qL>B||!Wh3Dakyga)rNHS~l7s}>E*9EbIwX9z&+Cc1>DRU Ay#N3J literal 0 HcmV?d00001 diff --git a/Data/WebUI/src/App.jsx b/Data/WebUI/src/App.jsx index c27c82e..7c9e4ae 100644 --- a/Data/WebUI/src/App.jsx +++ b/Data/WebUI/src/App.jsx @@ -58,7 +58,7 @@ if (!window.BorealisUpdateRate) { window.BorealisUpdateRate = 200; // Default Update Rate: 100ms } -const nodeContext = require.context("./nodes", true, /\.jsx$/); +const nodeContext = require.context("./nodes", true, /\.jsx$/); // Dynamically import all node components from the nodes directory const nodeTypes = {}; const categorizedNodes = {}; @@ -82,6 +82,7 @@ nodeContext.keys().forEach((path) => { function FlowEditor({ nodes, edges, setNodes, setEdges, nodeTypes }) { const reactFlowWrapper = useRef(null); const { project } = useReactFlow(); + const [contextMenu, setContextMenu] = useState(null); // Node Right-Click Context Menu const onDrop = useCallback( (event) => { @@ -150,6 +151,34 @@ function FlowEditor({ nodes, edges, setNodes, setEdges, nodeTypes }) { [setEdges] ); + const handleRightClick = (event, node) => { + event.preventDefault(); + setContextMenu({ + mouseX: event.clientX + 2, + mouseY: event.clientY - 6, + nodeId: node.id + }); + }; + + const handleDisconnect = () => { + if (contextMenu?.nodeId) { + setEdges((eds) => + eds.filter((e) => e.source !== contextMenu.nodeId && e.target !== contextMenu.nodeId) + ); + } + setContextMenu(null); + }; + + const handleRemoveNode = () => { + if (contextMenu?.nodeId) { + setNodes((nds) => nds.filter((n) => n.id !== contextMenu.nodeId)); + setEdges((eds) => + eds.filter((e) => e.source !== contextMenu.nodeId && e.target !== contextMenu.nodeId) + ); + } + setContextMenu(null); + }; + useEffect(() => { const nodeCountEl = document.getElementById("nodeCount"); if (nodeCountEl) { @@ -169,6 +198,7 @@ function FlowEditor({ nodes, edges, setNodes, setEdges, nodeTypes }) { onConnect={onConnect} onDrop={onDrop} onDragOver={onDragOver} + onNodeContextMenu={handleRightClick} defaultViewport={{ x: 0, y: 0, zoom: 1.5 }} edgeOptions={{ type: "smoothstep", @@ -186,10 +216,33 @@ function FlowEditor({ nodes, edges, setNodes, setEdges, nodeTypes }) { color="rgba(255, 255, 255, 0.2)" /> + + {/* Right-Click Node Menu */} + setContextMenu(null)} + anchorReference="anchorPosition" + anchorPosition={ + contextMenu !== null + ? { top: contextMenu.mouseY, left: contextMenu.mouseX } + : undefined + } + PaperProps={{ + sx: { + bgcolor: "#1e1e1e", + color: "#fff", + fontSize: "13px" + } + }} + > + Disconnect All Edges + Remove Node + ); } + const darkTheme = createTheme({ palette: { mode: "dark",