rendering changes + qol updates + more todos

public/assets/icons/circle-info-solid-full.svg

···
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free 7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2025 Fonticons, Inc.--><path fill="#fff" d="M320 576C461.4 576 576 461.4 576 320C576 178.6 461.4 64 320 64C178.6 64 64 178.6 64 320C64 461.4 178.6 576 320 576zM288 224C288 206.3 302.3 192 320 192C337.7 192 352 206.3 352 224C352 241.7 337.7 256 320 256C302.3 256 288 241.7 288 224zM280 288L328 288C341.3 288 352 298.7 352 312L352 400L360 400C373.3 400 384 410.7 384 424C384 437.3 373.3 448 360 448L280 448C266.7 448 256 437.3 256 424C256 410.7 266.7 400 280 400L304 400L304 336L280 336C266.7 336 256 325.3 256 312C256 298.7 266.7 288 280 288z"/></svg>

src/App.tsx

···
 import "./App.css";
 import { renderBackgroundGrid, renderContextMenu, renderNodes, renderNullTab, renderTempDrawing } from "./renderer";
 import { lerp } from "./utils/lerp";
-import { Node, NodeIO, NodeIOResolveAnyTypes } from "./structs/node";
+import { Node, NodeIO, NodeIOCanCast, NodeIOResolveAnyTypes } from "./structs/node";
 import { isPointInRect, isPointInRectApplyOffset, screenToWorldSpace } from "./utils/interections";
 import { ControlBar } from "./components/ControlBar";
 import { CanvasContextMenu } from "./ContextMenu/Canvas";
···
 import { ConfirmationPopup } from "./components/ConfirmationPopup";
 
 let App = () => {
-  // TODO: Delete selected node when delete key is pressed
   // TODO: Keybind system
+  // TODO: Delete selected node when delete key is pressed
+  // TODO: Copy / paste
   // TODO: Add undo / redo -ing
+  // TODO: Multi-select
 
   let [ selectedNode, setSelectedNode ] = createSignal<Node | null>(null);
 
···
         return;
       }
 
+      if(e.shiftKey){
+        // TODO: Multi-select
+        return;
+      }
+
       if(contextMenu.visible){
         let submenus: ContextMenu[] = [];
         contextMenu.items.map(x => x.menu ? submenus.push(x.menu): null);
···
 
           if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
             e.clientX, e.clientY,
-            node.x, node.y, node.w, node.h
+            node.x - 20, node.y, node.w + 40, node.h
           )){
             node.outputs.map(( output, i ) => {
               if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
                 e.clientX, e.clientY,
-                node.x + (node.w - 30),
+                node.x + (node.w - 10),
                 node.y + 50 + (30 * i),
                 20, 20
               )){
                 output.index = i;
 
-                drawingTo = [ node.x + (node.w - 30), node.y + 50 + (30 * i) ];
+                drawingTo = [
+                  node.x + (node.w - 10),
+                  node.y + 50 + (30 * i)
+                ];
                 drawingFrom = output;
 
                 isDrawing = true;
···
             node.inputs.map(( input, i ) => {
               if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
                 e.clientX, e.clientY,
-                node.x + 10,
+                node.x - 10,
                 node.y + 50 + (30 * i),
                 20, 20
               )){
···
           node.inputs.map(( input, i ) => {
             if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
               e.clientX, e.clientY,
-              node.x + 10,
+              node.x - 10,
               node.y + 50 + (30 * i),
               20, 20
             )){
···
                   drawingFrom!.connections.indexOf(input) === -1 &&
                   (
                     toType === null ||
-                    fromType === toType
+                    NodeIOCanCast(fromType, toType)
                   )
                 ){
                   drawingFrom!.connections.push(input);

src/Nodes/OSCTrigger.tsx

···
   typeId: 'osctrigger',
 
   w: 200,
-  h: 50,
+  h: 55,
 
   statics: [
     {
···
       }
     });
 
-    node.h = 60 + (parameters.length + 1) * 30;
+    node.h = 65 + (parameters.length + 1) * 30;
     NodeManager.Instance.UpdateConfig();
   }
 };

src/components/TabMenu.css

···
   border-radius: 5px;
   transition: 0.1s;
   background: transparent;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
 }
 
 .tab-icon-bar img:hover{

src/components/TabMenu.tsx

···
 import { NodeManager } from '../Mangers/NodeManager';
 import { Tab } from '../structs/Tab';
 import { SettingsMenu } from './SettingsMenu';
+import { openUrl } from '@tauri-apps/plugin-opener';
 
 export let TabMenu = () => {
   let [ tabImportOpen, setTabImportOpen ] = createSignal(false);
···
       <Show when={settingsOpen()}>
         <SettingsMenu close={() => setSettingsOpen(false)} />
       </Show>
-      
+
       <div class="tab-menu">
         <div class="tab-container">
           <For each={Object.values(tabs())}>
···
 
         <div class="tab-icon-bar">
           <img src="/assets/icons/gear-solid-full.svg" width="25" onClick={() => setSettingsOpen(true)} />
+          <div style={{ width: 'calc(100% - 50px)' }}></div>
+          <img src="/assets/icons/circle-info-solid-full.svg" width="25" onClick={() => openUrl('https://github.com/phaze-the-dumb/VRCMacros/wiki')} />
         </div>
       </div>
     </>

src/renderer.ts

···
     let nodeX = Math.round(node.x / 10) * 10;
     let nodeY = Math.round(node.y / 10) * 10;
 
-    ctx.fillStyle = '#1f2129';
-    ctx.strokeStyle = node.selected ? '#004696ff' : '#fff5';
+    ctx.fillStyle = '#343742ff';
+    ctx.strokeStyle = node.selected ? '#004696ff' : '#fff0';
     ctx.lineWidth = 5 * position.scale;
 
     // Draw Node Box
···
       node.h * position.scale,
       10 * position.scale);
 
+    ctx.shadowColor = '#0005';
+    ctx.shadowBlur = 10;
+
     ctx.stroke();
     ctx.fill();
+
+    ctx.shadowBlur = 0;
 
     // Draw Node Name
     ctx.fillStyle = '#fff';
-    ctx.font = (25 * position.scale) + 'px Comic Mono';
+    ctx.font = (25 * position.scale) + 'px Rubik';
     ctx.textAlign = 'center';
 
     ctx.fillText(node.name,
···
     );
 
     // Draw Inputs
-    ctx.font = (15 * position.scale) + 'px Comic Mono';
+    ctx.font = (15 * position.scale) + 'px Rubik';
     ctx.textAlign = 'left';
 
     node.inputs.map(( input, i ) => {
       ctx.fillStyle = NodeIOLinkColours(input);
-      ctx.fillRect(
-        (nodeX + 10 + startX + position.x) * position.scale,
-        (nodeY + 50 + (30 * i) + startY + position.y) * position.scale,
-        20 * position.scale, 20 * position.scale
-      )
+
+      ctx.beginPath();
+      ctx.arc(
+        (nodeX - 10 + startX + 10 + position.x) * position.scale,
+        (nodeY + 50 + (30 * i) + startY + 10 + position.y) * position.scale,
+        7 * position.scale,
+        0,
+        Math.PI * 2,
+      );
+      ctx.fill();
 
       ctx.fillText(input.name,
-        (nodeX + 35 + startX + position.x) * position.scale,
+        (nodeX + 15 + startX + position.x) * position.scale,
         (nodeY + 53 + (30 * i) + startY + position.y) * position.scale,
       )
     })
···
 
     node.outputs.map(( output, i ) => {
       ctx.fillStyle = NodeIOLinkColours(output);
-      ctx.fillRect(
-        (nodeX + (node.w - 30) + startX + position.x) * position.scale,
-        (nodeY + 50 + (30 * i) + startY + position.y) * position.scale,
-        20 * position.scale, 20 * position.scale
-      )
+
+      ctx.beginPath();
+      ctx.arc(
+        (nodeX + (node.w - 10) + startX + 10 + position.x) * position.scale,
+        (nodeY + 50 + (30 * i) + startY + 10 + position.y) * position.scale,
+        7 * position.scale,
+        0,
+        Math.PI * 2,
+      );
+      ctx.fill();
 
       ctx.fillText(output.name,
-        (nodeX + (node.w - 35) + startX + position.x) * position.scale,
+        (nodeX + (node.w - 15) + startX + position.x) * position.scale,
         (nodeY + 53 + (30 * i) + startY + position.y) * position.scale,
       )
     })
···
     node.outputs.map(( output, i ) => {
       output.connections.map(partner => {
         ctx.strokeStyle = NodeIOLinkColours(output);
+        ctx.lineWidth = 3 * position.scale;
+
         drawCurve(ctx,
-          (nodeX + (node.w - 30) + 10 + startX + position.x) * position.scale,
+          (nodeX + (node.w - 10) + 10 + startX + position.x) * position.scale,
           (nodeY + 50 + (30 * i) + 10 + startY + position.y) * position.scale,
-          ((Math.round(partner.parent.x / 10) * 10) + 20 + startX + position.x) * position.scale,
+          ((Math.round(partner.parent.x / 10) * 10) + startX + position.x) * position.scale,
           ((Math.round(partner.parent.y / 10) * 10) + 60 + (30 * partner.index) + startY + position.y) * position.scale,
         );
         ctx.stroke();
···
   contextMenu: ContextMenu
 ) => {
   if(contextMenu.visible){
-    ctx.font = '20px Arial';
+    ctx.font = '20px Rubik';
     ctx.textBaseline = 'top';
     ctx.textAlign = 'left';
 
···
   let startX = canvas.width / -2;
   let startY = canvas.height / -2;
 
-  ctx.fillStyle = '#f00';
+  // DEBUG STUFF
+  // ctx.fillStyle = '#f00';
 
-  ctx.fillRect(
-    (drawingTo[0] + 10 + startX + position.x) * position.scale,
-    (drawingTo[1] + 10 + startY + position.y) * position.scale,
-    10, 10
-  );
+  // ctx.fillRect(
+  //   (drawingTo[0] + 10 + startX + position.x) * position.scale,
+  //   (drawingTo[1] + 10 + startY + position.y) * position.scale,
+  //   10, 10
+  // );
 
-  ctx.fillRect(
-    (drawingFrom.parent.x + (drawingFrom.parent.w - 30) + 10 + startX + position.x) * position.scale,
-    (drawingFrom.parent.y + 50 + (30 * drawingFrom.index) + 10 + startY + position.y) * position.scale,
-    10, 10
-  );
+  // ctx.fillRect(
+  //   (drawingFrom.parent.x + (drawingFrom.parent.w - 10) + 10 + startX + position.x) * position.scale,
+  //   (drawingFrom.parent.y + 50 + (30 * drawingFrom.index) + 10 + startY + position.y) * position.scale,
+  //   10, 10
+  // );
 
   ctx.strokeStyle = NodeIOLinkColours(drawingFrom);
+  ctx.lineWidth = 3 * position.scale;
+
+  let nodeX = Math.round(drawingFrom.parent.x / 10) * 10;
+  let nodeY = Math.round(drawingFrom.parent.y / 10) * 10;
+
   drawCurve(ctx,
-    (drawingFrom.parent.x + (drawingFrom.parent.w - 30) + 10 + startX + position.x) * position.scale,
-    (drawingFrom.parent.y + 50 + (30 * drawingFrom.index) + 10 + startY + position.y) * position.scale,
+    (nodeX + (drawingFrom.parent.w - 10) + 10 + startX + position.x) * position.scale,
+    (nodeY + 50 + (30 * drawingFrom.index) + 10 + startY + position.y) * position.scale,
     (drawingTo[0] + 10 + startX + position.x) * position.scale,
     (drawingTo[1] + 10 + startY + position.y) * position.scale,
   );
···
 ) => {
   ctx.fillStyle = '#fff';
 
-  ctx.font = '20px Arial';
+  ctx.font = '20px Rubik';
   ctx.textBaseline = 'middle';
   ctx.textAlign = 'center';
 
   let textX = lerp((canvas.width / -2) + 200, canvas.width / 2, 0.5);
   let textY = lerp((canvas.height / -2) + 40, canvas.height / 2, 0.5);
 
-  ctx.font = '40px Arial';
+  ctx.font = '40px Rubik';
   ctx.fillText('Welcome to VRCMacros', textX, textY);
 
-  ctx.font = '20px Arial';
+  ctx.font = '20px Rubik';
   ctx.fillText('Create a new tab to get started!', textX, textY + 40);
 }
 

src/structs/node.ts

···
   ParameterList = 10
 }
 
+export let NodeIOCanCast = ( input: NodeType | null, output: NodeType | null ): boolean => {
+  if(input === output)return true;
+  if(!input || !output)return false;
+
+  return false;
+}
+
 export let NodeIOResolveAnyTypes = ( nodeio: NodeIO ): NodeType | null => {
   if(nodeio.type > 0 && nodeio.type < 6){
     // It's a base type