add multi-select

src/App.tsx

···
 
 import * as keybinds from './keybinds';
 import { listen } from "@tauri-apps/api/event";
+import { ConfirmationPopup } from "./components/ConfirmationPopup";
 
 let App = () => {
-  let [ selectedNode, setSelectedNode ] = createSignal<Node | null>(null);
+  let [ selectedNodes, setSelectedNodes ] = createSignal<Node[]>([]);
 
   let canvas!: HTMLCanvasElement;
   let ctx: CanvasRenderingContext2D;
···
   }
 
   onMount(async () => {
-    NodeManager.Instance.HookTabChange(() => setSelectedNode(null));
+    NodeManager.Instance.HookTabChange(() => setSelectedNodes([]));
 
     ctx = canvas.getContext('2d')!;
 
···
       }
 
       if(clickedNode){
-        contextMenu.items = NodeContextMenu(clickedNode, selectedNode, setSelectedNode);
+        contextMenu.items = NodeContextMenu(clickedNode, selectedNodes, setSelectedNodes);
       } else{
         contextMenu.items = CanvasContextMenu;
       }
···
         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(nodes){
         nodes.map(node => {
-          node.selected = false;
+          if(!e.shiftKey)node.selected = false;
 
           if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
             e.clientX, e.clientY,
···
 
       movingNode = clickedNode;
 
-      if(clickedNode){
+      if(!e.shiftKey){
+        if(clickedNode){
+          clickedNode.selected = true;
+          setSelectedNodes([ clickedNode ]);
+        } else{
+          setSelectedNodes([]);
+        }
+      } else{
         clickedNode.selected = true;
-        setSelectedNode(clickedNode);
+
+        let snodes = selectedNodes();
+        if(!snodes.find(x => x.id === clickedNode!.id)){
+          snodes.push(clickedNode);
+          clickedNode.selected = true;
+
+          setSelectedNodes(snodes);
+        }
       }
 
       isMouseDown = true;
···
     }
 
     canvas.onmousemove = ( e ) => {
+      if(e.shiftKey && isMouseDown){
+        let nodes = NodeManager.Instance.GetNodes();
+        let hoveredNode: Node | null = null;
+
+        if(nodes){
+          nodes.map(node => {
+            if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
+              e.clientX, e.clientY,
+              node.x - 20, node.y, node.w + 40, node.h
+            )){
+              hoveredNode = node;
+              return;
+            }
+          })
+        }
+
+        if(hoveredNode !== null){
+          let snodes = selectedNodes();
+          if(!snodes.find(x => x.id === hoveredNode!.id)){
+            snodes.push(hoveredNode);
+
+            // @ts-ignore
+            hoveredNode.selected = true;
+            setSelectedNodes(snodes);
+          }
+        }
+
+        return;
+      }
+
       if(isMouseDown){
         if(isDrawing){
           drawingTo = screenToWorldSpace(canvas, { x: offset[0], y: offset[1], scale }, e.clientX - 10 * scale, e.clientY - 10 * scale) as [ number, number ];
···
       isMouseDown = false;
     }
 
-    keybinds.load(selectedNode, setSelectedNode);
+    keybinds.load(selectedNodes, setSelectedNodes);
     requestAnimationFrame(update);
 
     let unlisten_0 = await listen('hide-window', () => {
···
 
   return (
     <>
+      <ConfirmationPopup />
       <TabMenu />
-      <ControlBar node={selectedNode} lockMovement={( lock ) => lockMovement = lock} />
+      <ControlBar node={selectedNodes} lockMovement={( lock ) => lockMovement = lock} />
       <canvas ref={canvas}/>
     </>
   );

src/ContextMenu/Node.tsx

···
 import { PositionInfo } from "../renderer";
 import { Node } from "../structs/node";
 
-export let NodeContextMenu = ( clickedNode: Node, selectedNode: Accessor<Node | null>, setSelectedNode: Setter<Node | null>  ) => [
+export let NodeContextMenu = ( clickedNode: Node, selectedNode: Accessor<Node[]>, setSelectedNode: Setter<Node[]>  ) => [
   {
     text: "Delete Node",
     clicked: ( _e: MouseEvent, _canvas: HTMLCanvasElement, _position: PositionInfo ) => {
···
       })
 
       let selected = selectedNode();
-      if(selected && clickedNode.id === selected.id)setSelectedNode(null);
+      for (let i = 0; i < selected.length; i++) {
+        let node = selected[i];
+
+        if(node.id === clickedNode.id){
+          selected.splice(i, 1);
+          setSelectedNode(selected);
+
+          break;
+        }
+      }
 
       NodeManager.Instance.RemoveNode(clickedNode!)
     },

src/components/ConfirmationPopup.tsx

···
           <div class="confirmation-popup">
             <h2>{ConfirmationManager.Instance.Text()}</h2>
             <p>{ConfirmationManager.Instance.Body()}</p>
-            
+
             <div class="confirmation-buttons">
               <For each={ConfirmationManager.Instance.Buttons()}>
                 { item =>

src/components/ControlBar.tsx

···
 import { NodeManager } from '../Mangers/NodeManager';
 
 export interface ControlBarProps{
-  node: Accessor<Node | null>,
+  node: Accessor<Node[]>,
   lockMovement: ( lock: boolean ) => void
 }
 
···
 
   return (
     <div class="control-bar">
-      <For each={props.node()?.statics}>
+      <For each={props.node()[0]?.statics}>
         { ( item ) => {
           let [ popupOpen, setPopupOpen ] = createSignal(false);
 
···
                       value={item.value || ''}
                       onChange={( el ) => {
                         let value = el.target.value;
-                        let node = props.node()!;
+                        let node = props.node()[0]!;
 
                         item.value = value;
                         node.onStaticsUpdate(node);
···
                       value={item.value !== undefined ? item.value : ''}
                       onChange={( el ) => {
                         let value = el.target.value;
-                        let node = props.node()!;
+                        let node = props.node()[0]!;
 
                         item.value = parseInt(value);
                         node.onStaticsUpdate(node);
···
                       value={item.value !== undefined ? item.value : ''}
                       onChange={( el ) => {
                         let value = el.target.value;
-                        let node = props.node()!;
+                        let node = props.node()[0]!;
 
                         item.value = parseFloat(value);
                         node.onStaticsUpdate(node);
···
                         return addresses.map(x => x.address).filter(x => x.toLowerCase().includes(text.toLowerCase()));
                       }}
                       change={( text ) => {
-                        let node = props.node()!;
+                        let node = props.node()[0]!;
 
                         item.value = text;
                         node.onStaticsUpdate(node);
···
                       }}
                       value={item.value}
                       changed={( value ) => {
-                        let node = props.node()!;
+                        let node = props.node()[0]!;
 
                         item.value = value;
                         node.onStaticsUpdate(node);

src/keybinds.ts

···
 
 let isKeyDown: any = {};
 
-export let load = ( selectedNode: Accessor<Node | null>, setSelectedNode: Setter<Node | null> ) => {
+export let load = ( selectedNode: Accessor<Node[]>, setSelectedNode: Setter<Node[]> ) => {
   // TODO: Copy / paste
   // TODO: Add undo / redo -ing
 
···
 
     switch(e.key){
       case 'Delete':
-        let node = selectedNode();
-        if(!node)return;
+        let nodes = selectedNode();
+        for(let node of nodes){
+          node.inputs.map(input => {
+            input.connections.map(partner => {
+              partner.connections = partner.connections.filter(x => x != input);
+            })
+          })
 
-        node.inputs.map(input => {
-          input.connections.map(partner => {
-            partner.connections = partner.connections.filter(x => x != input);
+          node.outputs.map(output => {
+            output.connections.map(partner => {
+              partner.connections = partner.connections.filter(x => x != output);
+            })
           })
-        })
 
-        node.outputs.map(output => {
-          output.connections.map(partner => {
-            partner.connections = partner.connections.filter(x => x != output);
-          })
-        })
+          NodeManager.Instance.RemoveNode(node);
+        }
 
-        setSelectedNode(null);
-        NodeManager.Instance.RemoveNode(node);
+        setSelectedNode([]);
         break;
       case 's':
         if(e.ctrlKey){