fuck it, redo entire frontend

src-tauri/src/frontend_calls/get_actions.rs

···
-use crate::structs::action::{ Action, ActionParameters };
-
-#[tauri::command]
-pub fn get_actions() -> Vec<Action> {
-  vec![
-    Action {
-      name: "If Equals".into(),
-      parameters: vec![ ActionParameters::AnyType, ActionParameters::Label(" = "), ActionParameters::AnyType ]
-    }
-  ]
-}
-
-#[tauri::command]
-pub fn get_action( name: String ) -> Option<Action> {
-  let actions = vec![
-    Action {
-      name: "If Equals".into(),
-      parameters: vec![ ActionParameters::AnyType, ActionParameters::Label(" = "), ActionParameters::AnyType ]
-    }
-  ];
-
-  let action = actions.iter().find(| x | x.name == name);
-
-  if action.is_some(){
-    Some(action.unwrap().clone())
-  } else{
-    None
-  }
-}

src-tauri/src/frontend_calls/get_addresses.rs

···
 
 use tauri::State;
 
+use crate::osc::OSCMessage;
+
 #[tauri::command]
-pub fn get_addresses( addresses: State<&Mutex<Vec<String>>> ) -> Vec<String> {
+pub fn get_addresses( addresses: State<&Mutex<Vec<OSCMessage>>> ) -> Vec<OSCMessage> {
   let addresses = addresses.lock().unwrap();
   addresses.clone()
 }

src-tauri/src/frontend_calls/mod.rs

···
-pub mod get_addresses;
-pub mod get_actions;
-
-pub mod triggers;
+pub mod get_addresses;

src-tauri/src/frontend_calls/triggers.rs

···
-use serde_json::{json, Value};
-use tauri::State;
-
-use crate::utils::config::Config;
-
-#[tauri::command]
-pub fn new_trigger( id: String, conf: State<Config> ){
-  if let Some(triggers) = conf.get("triggers").unwrap_or(Value::Array(Vec::new())).as_array(){
-    let mut triggers = triggers.clone();
-    triggers.push(json!({
-      "id": id,
-      "address": "",
-      "actions": []
-    }));
-
-    conf.set("triggers", Value::Array(triggers));
-    conf.save();
-  }
-}
-
-#[tauri::command]
-pub fn rm_trigger( indx: usize, conf: State<Config> ){
-  if let Some(triggers) = conf.get("triggers").unwrap_or(Value::Array(Vec::new())).as_array(){
-    let mut triggers = triggers.clone();
-    triggers.remove(indx);
-
-    conf.set("triggers", Value::Array(triggers));
-    conf.save();
-  }
-}
-
-#[tauri::command]
-pub fn add_trigger_action( indx: usize, action: Value, conf: State<Config> ){
-  if let Some(triggers) = conf.get("triggers").unwrap_or(Value::Array(Vec::new())).as_array(){
-    let mut triggers = triggers.clone();
-
-    let actions = triggers[indx]["actions"].as_array_mut().unwrap();
-    actions.push(action);
-
-    conf.set("triggers", Value::Array(triggers));
-    conf.save();
-  }
-}
-
-#[tauri::command]
-pub fn rm_trigger_action( indx: usize, action_indx: usize, conf: State<Config> ){
-  if let Some(triggers) = conf.get("triggers").unwrap_or(Value::Array(Vec::new())).as_array(){
-    let mut triggers = triggers.clone();
-
-    let actions = triggers[indx]["actions"].as_array_mut().unwrap();
-    actions.remove(action_indx);
-
-    conf.set("triggers", Value::Array(triggers));
-    conf.save();
-  }
-}
-
-#[tauri::command]
-pub fn set_trigger_action_type( indx: usize, action_indx: usize, action_type: Option<String>, conf: State<Config> ){
-  if let Some(triggers) = conf.get("triggers").unwrap_or(Value::Array(Vec::new())).as_array(){
-    let mut triggers = triggers.clone();
-
-    triggers[indx]["actions"][action_indx]["actionType"] = if action_type.is_none(){
-      Value::Null
-    } else {
-      Value::String(action_type.unwrap())
-    };
-
-    conf.set("triggers", Value::Array(triggers));
-    conf.save();
-  }
-}
-
-#[tauri::command]
-pub fn set_trigger_address( indx: usize, address: String, conf: State<Config> ){
-  if let Some(triggers) = conf.get("triggers").unwrap_or(Value::Array(Vec::new())).as_array(){
-    let mut triggers = triggers.clone();
-    triggers[indx]["address"] = Value::String(address);
-
-    conf.set("triggers", Value::Array(triggers));
-    conf.save();
-  }
-}
-
-#[tauri::command]
-pub fn list_triggers( conf: State<Config> ) -> Value{
-  conf.get("triggers").unwrap_or(Value::Array(Vec::new()))
-}

src-tauri/src/lib.rs

···
 
 use frontend_calls::*;
 
-use crate::{ setup::setup, utils::config::Config };
+use crate::{ osc::OSCMessage, setup::setup, utils::config::Config };
 
 mod frontend_calls;
 mod structs;
···
   let conf_file = container_folder.join("conf");
   let conf = Config::new(conf_file);
 
-  static ADDRESSES: Mutex<Vec<String>> = Mutex::new(Vec::new());
+  static ADDRESSES: Mutex<Vec<OSCMessage>> = Mutex::new(Vec::new());
 
   tauri::Builder::default()
     .plugin(tauri_plugin_opener::init())
     .invoke_handler(tauri::generate_handler![
       get_addresses::get_addresses,
-      get_actions::get_actions,
-      get_actions::get_action,
-
-      triggers::new_trigger,
-      triggers::rm_trigger,
-      triggers::add_trigger_action,
-      triggers::rm_trigger_action,
-      triggers::set_trigger_action_type,
-      triggers::set_trigger_address,
-      triggers::list_triggers,
     ])
     .manage(conf)
     .manage(&ADDRESSES)

src-tauri/src/osc.rs

···
 
 use serde::Serialize;
 
-#[derive(Debug, Clone, Serialize)]
-pub enum OSCValue{
-  Int(i32),
-  Float(f32),
-  Boolean(bool),
-  String(String),
-}
+use crate::structs::parameter_types::ParameterType;
 
 #[derive(Debug, Clone, Serialize)]
 pub struct OSCMessage{
   pub address: String,
-  pub values: Vec<OSCValue>
+  pub values: Vec<ParameterType>
+}
+
+impl PartialEq for OSCMessage{
+  // Technically this isn't exactly equal, but the only time i'm checking if OSCMessage's are equal
+  // Is when i'm checking for the "address" value
+
+  fn eq(&self, other: &Self) -> bool {
+    self.address == other.address
+  }
+
+  fn ne(&self, other: &Self) -> bool {
+    self.address != other.address
+  }
 }
 
-// TODO: implement osc bundles
+// TODO: Implement osc bundles
 pub fn start_server( sender: Sender<OSCMessage>, addr: &str ) {
   let socket = UdpSocket::bind(addr).unwrap();
 
···
           let bytes = <&[u8; 4]>::try_from(val_buf).unwrap().clone();
           let int = i32::from_be_bytes(bytes);
 
-          values.push(OSCValue::Int(int));
+          values.push(ParameterType::Int(int));
           value_start += 4;
         },
         0x66 => {
···
           let bytes = <&[u8; 4]>::try_from(val_buf).unwrap().clone();
           let float = f32::from_be_bytes(bytes);
 
-          values.push(OSCValue::Float(float));
+          values.push(ParameterType::Float(float));
           value_start += 4;
         },
-        0x54 => values.push(OSCValue::Boolean(true)),
-        0x46 => values.push(OSCValue::Boolean(false)),
+        0x54 => values.push(ParameterType::Boolean(true)),
+        0x46 => values.push(ParameterType::Boolean(false)),
         _ => {}
       }
     }
···
   }
 }
 
-pub fn send_message( address: &str, values: Vec<OSCValue>, ip_addr: &str ){
+pub fn send_message( address: &str, values: Vec<ParameterType>, ip_addr: &str ){
   let socket = UdpSocket::bind("127.0.0.1:0").unwrap();
   let mut buf: Vec<u8> = Vec::new();
 
···
   let mut value_count = 1;
   for value in values.clone() {
     match value {
-      OSCValue::Boolean( val ) => buf.push(if val { 0x54 } else { 0x46 }),
-      OSCValue::Float(_) => buf.push(0x66),
-      OSCValue::Int(_) => buf.push(0x69),
-      OSCValue::String(_) => buf.push(0x73)
+      ParameterType::Boolean( val ) => buf.push(if val { 0x54 } else { 0x46 }),
+      ParameterType::Float(_) => buf.push(0x66),
+      ParameterType::Int(_) => buf.push(0x69),
+      ParameterType::String(_) => buf.push(0x73),
+      _ => {}
     };
 
     value_count += 1;
···
 
   for value in values{
     match value{
-      OSCValue::Float( val ) => buf.append(&mut val.to_be_bytes().to_vec()),
-      OSCValue::Int( val ) => buf.append(&mut val.to_be_bytes().to_vec()),
-      OSCValue::String( val ) => {
+      ParameterType::Float( val ) => buf.append(&mut val.to_be_bytes().to_vec()),
+      ParameterType::Int( val ) => buf.append(&mut val.to_be_bytes().to_vec()),
+      ParameterType::String( val ) => {
         let mut str_buf = val.as_bytes().to_vec();
         let buf_len = str_buf.len().clone();
 

src-tauri/src/setup.rs

···
 
 use tauri::{ App, Emitter, Manager };
 
-use crate::{ osc };
+use crate::osc::{ self, OSCMessage };
 
-pub fn setup( app: &mut App, addresses: &'static Mutex<Vec<String>> ){
+pub fn setup( app: &mut App, addresses: &'static Mutex<Vec<OSCMessage>> ){
   let window = app.get_webview_window("main").unwrap();
 
   let ( sender, receiver ) = sync::mpsc::channel();
···
 
       window.emit("osc-message", &message).unwrap();
 
-      let addr = message.address.clone();
+      let msg = message.clone();
       let mut addresses = addresses.lock().unwrap();
-      if !addresses.contains(&addr){ addresses.push(addr); }
+      if !addresses.contains(&msg){ addresses.push(msg); }
     }
   });
 }

src-tauri/src/structs/action.rs

···
-use serde::Serialize;
-
-#[derive(Serialize, Clone)]
-#[serde(tag = "key", content = "value")]
-pub enum ActionParameters{
-  AnyType,
-  Int,
-  String,
-  Float,
-  Boolean,
-  Actions,
-  Label(&'static str)
-}
-
-#[derive(Serialize, Clone)]
-pub struct Action{
-  pub name: String,
-  pub parameters: Vec<ActionParameters>
-}

src-tauri/src/structs/mod.rs

···
-pub mod action;
+pub mod parameter_types;

src-tauri/src/structs/parameter_types.rs

···
+use serde::Serialize;
+
+#[derive(Serialize, Clone, Debug)]
+#[serde(tag = "key", content = "value")]
+pub enum ParameterType{
+  AnyType(String),
+  Label(&'static str),
+
+  Int(i32),
+  Float(f32),
+  Boolean(bool),
+  String(String),
+}

src-tauri/tauri.conf.json

···
     "windows": [
       {
         "title": "vrcmacros",
-        "width": 1000,
-        "height": 500
+        "width": 1400,
+        "height": 700
       }
     ],
     "security": {

src/App.css

···
-@font-face {
-  font-family: Rubik;
-  src: url('/assets/fonts/Rubik-VariableFont_wght.ttf');
-}
-
-* {
-  box-sizing: border-box;
-  -webkit-user-select: none;
-}
-
 body{
-  background: linear-gradient(-45deg,
-    #12141a 0%, #12141a 10%,
-    #22262e 10%, #22262e 20%,
-    #272e44 20%, #272e44 22%,
-    #1f2129 22%
-  );
+  background: #1f2129;
   background-attachment: fixed;
   color: #fff;
   font-family: Rubik, 'Courier New';
   margin: 0;
 }
 
-h1, h2, h3, h4, h5, h6, p{
-  margin: 0;
-  font-weight: 500;
+* {
+  box-sizing: border-box;
 }
 
-span{
-  -webkit-user-select: auto;
+p, h1, h2, h3, h4, h5, h6{
+  margin: 0;
 }
 
-div[app-carousel]{
+canvas{
   position: fixed;
-  top: 10px;
-  left: 220px;
-  width: calc(100vw - 230px);
-  height: calc(100vh - 20px);
-  overflow: hidden;
-}
-
-div[app-page]{
-  width: calc(100vw - 230px);
-  height: calc(100vh - 20px);
-  overflow-y: auto;
-  overflow-x: hidden;
-}
-
-div[app-button]{
-  display: inline-block;
-  background: #2a3452;
-  padding: 10px 25px;
-  cursor: pointer;
-  user-select: none;
-  border-radius: 5px;
-  transition: 0.25s;
-  min-width: 100px;
-  text-align: center;
-}
-
-div[app-button]:hover{
-  background: #151a29;
-}
-
-div[app-button-minimal]{
-  display: inline-block;
-  background: #424242;
-  padding: 10px 25px;
-  cursor: pointer;
-  user-select: none;
-  border-radius: 5px;
-  transition: 0.25s;
-  min-width: 100px;
-  text-align: center;
-  opacity: 0.5;
-}
-
-div[app-button-minimal]:hover{
-  background: #525252;
-}
-
-div[app-col]{
-  display: flex;
-}
-
-div[app-col-50]{
-  display: flex;
-}
-
-div[app-col-50] > div{
-  width: 50%;
-}
-
-div[app-icon]{
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 30px;
-  height: 30px;
-  user-select: none;
-  -webkit-user-select: none;
-  cursor: pointer;
-  transition: 0.1s;
-}
-
-div[app-icon]:hover{
-  opacity: 0.75;
+  top: 0;
+  left: 0;
 }

src/App.tsx

···
+import { createSignal, onCleanup, onMount } from "solid-js";
 import "./App.css";
+import { renderBackgroundGrid, renderContextMenu, renderNodes, renderTempDrawing } from "./renderer";
+import { lerp } from "./utils/lerp";
+import { Node, NodeIO, NodeIOResolveAnyTypes } from "./structs/node";
+import { isPointInRect, isPointInRectApplyOffset, screenToWorldSpace } from "./utils/interections";
+import { ControlBar } from "./ControlBar";
+import { CanvasContextMenu } from "./ContextMenu/Canvas";
+import { NodeContextMenu } from "./ContextMenu/Node";
+import { ContextMenu } from "./structs/ContextMenu";
+import { NodeManager } from "./Mangers/NodeManager";
 
-import { createEffect, createSignal } from "solid-js";
+let App = () => {
+  // TODO: Delete selected node when delete key is pressed
+  // TODO: Add undo / redo -ing
+  let [ selectedNode, setSelectedNode ] = createSignal<Node | null>(null);
+
+  let canvas!: HTMLCanvasElement;
+  let ctx: CanvasRenderingContext2D;
+
+  let stopRender = false;
+
+  let scale = 0.25;
+  let targetScale = 1;
+
+  let offset = [ 0, 0 ];
+  let offsetTarget = [ 0, 0 ];
+
+  let movingNode: Node | null = null;
+
+  let isDrawing = false;
+  let drawingFrom: NodeIO | null = null;
+  let drawingTo: [ number, number ] = [ 0, 0 ];
+
+  let lockMovement = false;
+
+  {
+    let loadedScale = localStorage.getItem('scale');
+    if(loadedScale)targetScale = parseFloat(loadedScale);
+
+    let loadedOffsetX = localStorage.getItem('offsetX');
+    if(loadedOffsetX)offsetTarget[0] = parseFloat(loadedOffsetX);
+
+    let loadedOffsetY = localStorage.getItem('offsetY');
+    if(loadedOffsetY)offsetTarget[1] = parseFloat(loadedOffsetY);
+  };
+
+  let screenMoved = false;
+
+  let contextMenu: ContextMenu = {
+    items: [],
+    position: [ 0, 0 ],
+    size: [ 0, 0 ],
+    visible: false
+  }
+
+  onMount(() => {
+    ctx = canvas.getContext('2d')!;
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    ctx.translate(canvas.width / 2, canvas.height / 2);
+
+    window.onresize = () => {
+      canvas.width = window.innerWidth;
+      canvas.height = window.innerHeight;
+
+      ctx.translate(canvas.width / 2, canvas.height / 2);
+    }
 
-import { Sidebar } from "./Components/Sidebar";
-import { Actions } from "./Components/Actions";
-import { Relays } from "./Components/Relays";
-import { animate } from "animejs";
-import { Settings } from "./Components/Settings";
-import { Debug } from "./Components/Debug";
+    canvas.onwheel = ( e ) => {
+      targetScale += e.deltaY * -(Math.sqrt(targetScale) * 0.001);
 
-let App = () => {
-  let [ page, setPage ] = createSignal(0);
-  let carousel!: HTMLDivElement;
+      if(targetScale < 0.25)targetScale = 0.25
+      else if(targetScale > 5)targetScale = 5;
 
-  createEffect(() => {
-    let pagenum = page();
-    animate(carousel.children, { translateY: '-' + ( 100 * pagenum ) + '%', ease: 'outElastic(.1, .7)', duration: 500 });
-  })
+      screenMoved = true;
+    }
+
+    requestAnimationFrame(update);
+  });
+
+  let update = () => {
+    if(stopRender)return;
+
+    scale = lerp(scale, targetScale, 0.25);
+
+    offset[0] = lerp(offset[0], offsetTarget[0], 0.5);
+    offset[1] = lerp(offset[1], offsetTarget[1], 0.5);
+
+    ctx.clearRect(canvas.width / -2, canvas.height / -2, canvas.width, canvas.height);
+
+    renderBackgroundGrid(canvas, ctx, { x: offset[0], y: offset[1], scale });
+    renderNodes(canvas, ctx, NodeManager.Instance.GetNodes(), { x: offset[0], y: offset[1], scale });
+    if(isDrawing)renderTempDrawing(canvas, ctx, drawingTo, drawingFrom!, { x: offset[0], y: offset[1], scale });
+    renderContextMenu(ctx, contextMenu);
+
+    requestAnimationFrame(update);
+  }
+
+  let isMouseDown = false;
+  let mouseStartPos = [ 0, 0 ];
+
+  window.oncontextmenu = ( e ) => {
+    e.preventDefault();
+
+    let clickedNode: Node | null = null
+    NodeManager.Instance.GetNodes().map(node => {
+      if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
+        e.clientX, e.clientY,
+        node.x, node.y, node.w, node.h
+      )){
+        clickedNode = node;
+        return;
+      }
+    })
+
+    if(clickedNode){
+      contextMenu.items = NodeContextMenu(clickedNode);
+    } else{
+      contextMenu.items = CanvasContextMenu;
+    }
+
+    contextMenu.position = [ e.clientX - 10 - canvas.width / 2, e.clientY - 10 - canvas.height / 2 ];
+    contextMenu.visible = true;
+  }
+
+  window.onmousedown = ( e ) => {
+    if(e.clientY < 50 || lockMovement)return;
+
+    if(e.button !== 0){
+      contextMenu.visible = false;
+      return;
+    }
+
+    if(contextMenu.visible){
+      let submenus: ContextMenu[] = [];
+      contextMenu.items.map(x => x.menu ? submenus.push(x.menu): null);
+
+      submenus.map(x => {
+        if(!x.visible)return;
+        if(isPointInRect(canvas, e.clientX, e.clientY,
+          x.position[0], x.position[1],
+          x.size[0], x.size[1]
+        )){
+          let item = x.items.filter(x => x.hovered)[0];
+          if(item && item.clicked)item.clicked(e, canvas, { x: offset[0], y: offset[1], scale });
+        }
+      });
+
+      if(isPointInRect(canvas, e.clientX, e.clientY,
+        contextMenu.position[0], contextMenu.position[1],
+        contextMenu.size[0], contextMenu.size[1]
+      )){
+        let item = contextMenu.items.filter(x => x.hovered)[0];
+        if(item && item.clicked)item.clicked(e, canvas, { x: offset[0], y: offset[1], scale });
+      }
+    }
+
+    contextMenu.visible = false;
+
+    let clickedNode: any = null;
+    isDrawing = false;
+
+    let clickedInput: any = null;
+
+    NodeManager.Instance.GetNodes().map(node => {
+      node.selected = false;
+
+      if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
+        e.clientX, e.clientY,
+        node.x, node.y, node.w, 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.y + 50 + (30 * i),
+            20, 20
+          )){
+            output.index = i;
+
+            drawingTo = [ node.x + (node.w - 30), node.y + 50 + (30 * i) ];
+            drawingFrom = output;
+
+            isDrawing = true;
+            return;
+          }
+        })
+
+        node.inputs.map(( input, i ) => {
+          if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
+            e.clientX, e.clientY,
+            node.x + 10,
+            node.y + 50 + (30 * i),
+            20, 20
+          )){
+            clickedInput = input;
+          }
+        })
+
+        clickedNode = node;
+        return;
+      }
+    })
+
+    if(clickedInput){
+      let partner = clickedInput.connections.pop();
+      if(!partner)return;
+
+      partner.connections = partner.connections.filter(( x: any ) => x !== clickedInput);
+
+      isDrawing = true;
+      isMouseDown = true;
+
+      drawingFrom = partner;
+      drawingTo = screenToWorldSpace(canvas, { x: offset[0], y: offset[1], scale }, e.clientX - 10 * scale, e.clientY - 10 * scale) as [ number, number ];;
+
+      return;
+    }
+
+    movingNode = clickedNode;
+
+    if(clickedNode){
+      clickedNode.selected = true;
+      setSelectedNode(clickedNode);
+    }
+
+    isMouseDown = true;
+    mouseStartPos = [ e.clientX, e.clientY ];
+  }
+
+  window.onmousemove = ( e ) => {
+    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 ];
+      } else if(movingNode){
+        movingNode.x = movingNode.x - (mouseStartPos[0] - e.clientX) / scale;
+        movingNode.y = movingNode.y - (mouseStartPos[1] - e.clientY) / scale;
+
+        mouseStartPos = [ e.clientX, e.clientY ];
+      } else{
+        offsetTarget = [ offsetTarget[0] - (mouseStartPos[0] - e.clientX) / scale, offsetTarget[1] - (mouseStartPos[1] - e.clientY) / scale ];
+        mouseStartPos = [ e.clientX, e.clientY ];
+
+        screenMoved = true;
+      }
+    }
+
+    // TODO: Fix this shit lmao please
+    if(contextMenu.visible){
+      let submenus: ContextMenu[] = [];
+      contextMenu.items.map(x => x.menu ? submenus.push(x.menu): null);
+
+      submenus.map(x => {
+        if(!x.visible)return;
+        if(isPointInRect(canvas, e.clientX, e.clientY,
+          x.position[0], x.position[1],
+          x.size[0], x.size[1]
+        )){
+          x.items.map((y, i) => {
+            y.hovered = isPointInRect(canvas, e.clientX, e.clientY,
+              x.position[0], x.position[1] + 10 + 25 * i,
+              x.size[0], 25
+            )
+          });
+        }
+      });
+
+      if(isPointInRect(canvas, e.clientX, e.clientY,
+        contextMenu.position[0], contextMenu.position[1],
+        contextMenu.size[0], contextMenu.size[1]
+      )){
+        contextMenu.items.map((x, i) => {
+          x.hovered = isPointInRect(canvas, e.clientX, e.clientY,
+            contextMenu.position[0], contextMenu.position[1] + 10 + 25 * i,
+            contextMenu.size[0], 25
+          )
+
+          if(x.menu)x.menu.visible = x.hovered;
+        });
+      }
+    }
+  }
+
+  window.onmouseup = ( e ) => {
+    NodeManager.Instance.GetNodes().map(node => {
+      node.inputs.map(( input, i ) => {
+        if(isPointInRectApplyOffset(canvas, { x: offset[0], y: offset[1], scale },
+          e.clientX, e.clientY,
+          node.x + 10,
+          node.y + 50 + (30 * i),
+          20, 20
+        )){
+          if(isDrawing){
+            let fromType = NodeIOResolveAnyTypes(drawingFrom!);
+            let toType = NodeIOResolveAnyTypes(input);
+
+            if(
+              drawingFrom!.connections.indexOf(input) === -1 &&
+              (
+                toType === null ||
+                fromType === toType
+              )
+            ){
+              drawingFrom!.connections.push(input);
+              input.connections.push(drawingFrom!);
+            }
+          }
+        }
+      })
+    })
+
+    isDrawing = false;
+    isMouseDown = false;
+  }
+
+  let interval = setInterval(() => {
+    if(screenMoved){
+      localStorage.setItem('scale', targetScale.toFixed(4));
+      localStorage.setItem('offsetX', offset[0].toFixed(4));
+      localStorage.setItem('offsetY', offset[1].toFixed(4));
+    }
+  }, 1000);
+
+  onCleanup(() => {
+    stopRender = true;
+    window.clearInterval(interval);
+  });
 
   return (
     <>
-      <Sidebar setPage={setPage} />
-
-      <div app-carousel ref={carousel}>
-        <Actions />
-        <Relays />
-        <Debug page={page} />
-        <Settings />
-      </div>
+      <ControlBar node={selectedNode} lockMovement={( lock ) => lockMovement = lock} />
+      <canvas ref={canvas}/>
     </>
   );
 }

src/Components/Actions.css

···
-div[app-trigger-el]{
-  padding: 10px;
-  background: #272e44;
-  margin: 10px;
-  border-radius: 5px;
-}
-
-div[app-trigger-action]{
-  padding: 5px;
-  margin: 5px;
-  border-radius: 5px;
-  background: #1c2030;
-}

src/Components/Actions.tsx

···
-import { For } from 'solid-js';
-import './Actions.css';
-import { TriggerEl } from './TriggerEl';
-import { createStore } from 'solid-js/store';
-import { invoke } from '@tauri-apps/api/core';
-
-export interface Trigger{
-  id: string,
-  address: string,
-  actions: any[]
-}
-
-export let Actions = () => {
-  let [ triggers, setTriggers ] = createStore<Trigger[]>([]);
-
-  invoke<Trigger[]>('list_triggers').then(triggers => { setTriggers(triggers) })
-
-  return (
-    <div app-page>
-      <div app-col>
-        <div style={{ width: '100%' }}><h1>Actions</h1></div>
-        <div app-button style={{ width: 'fit-content', "margin-left": '50%' }} onClick={() => {
-          let id = Math.random().toString().replace('0.', '');
-
-          invoke('new_trigger', { id });
-          setTriggers(( trig ) => [
-            ...trig,
-            { address: '', actions: [], id }
-          ]);
-        }}>+</div>
-      </div>
-
-      <For each={triggers}>
-        { ( item, index ) => <TriggerEl
-          trigger={item}
-          onDelete={() => {
-            invoke('rm_trigger', { indx: index() });
-            setTriggers(( trig ) => trig.filter(x => x.id !== item.id));
-          }}
-          onAddAction={( action ) => {
-            invoke('add_trigger_action', { indx: index(), action });
-            setTriggers(index(), "actions", ( actions ) => [ ...actions, action ]);
-          }}
-          onDeleteAction={( id, indx ) => {
-            invoke('rm_trigger_action', { indx: index(), actionIndx: indx });
-            setTriggers(index(), "actions", ( actions ) => actions.filter(x => x.id !== id))
-          }}
-          onSetActionType={( i, type ) => {
-            invoke('set_trigger_action_type', { indx: index(), actionIndx: i, actionType: type });
-            setTriggers(index(), "actions", i, "actionType", type)
-          }}
-          onSetOSCAddress={( address ) => {
-            invoke('set_trigger_address', { indx: index(), address });
-          }} /> }
-      </For>
-    </div>
-  )
-}

src/Components/Debug.css

···
-div[app-debug-el]{
-  padding: 10px;
-  background: #272e44;
-  margin: 10px;
-  border-radius: 5px;
-  box-shadow: #00ccff 0 0 10px;
-  transition: 0.5s;
-}

src/Components/Debug.tsx

···
-import './Debug.css';
-
-import { createEffect, onCleanup, onMount } from 'solid-js';
-import { listen, UnlistenFn } from '@tauri-apps/api/event';
-import { OSCMessage, OSCValue } from '../Structs/OSCMessage';
-
-let formatValuesForDebug = ( values: OSCValue[] ): string => {
-  let text = '';
-
-  for(let value of values){
-    if(value.Boolean !== undefined)
-      text += ' Boolean: ' + value.Boolean;
-    else if(value.Float !== undefined)
-      text += ' Float: ' + value.Float.toFixed(6);
-    else if(value.Int !== undefined)
-      text += ' Int: ' + value.Int;
-    else if(value.String !== undefined)
-      text += ' String: ' + value.String;
-  }
-
-  return text.trimStart();
-}
-
-export interface DebugProps{
-  page: () => number
-}
-
-export let Debug = ( props: DebugProps ) => {
-  let debugContainer!: HTMLDivElement;
-
-  let debugEls: any = {};
-
-  let isListening = false;
-  let unlisten: UnlistenFn;
-
-  let stopListening = () => {
-    if(!isListening)return;
-    isListening = false;
-
-    unlisten();
-  }
-
-  let startListening = async () => {
-    if(isListening)return;
-    isListening = true;
-
-    unlisten = await listen<OSCMessage>('osc-message', ( ev ) => {
-      let el = debugEls[ev.payload.address];
-      if(el){
-        el.style.boxShadow = '#00ccff 0 0 10px';
-        debugContainer.insertBefore(el, debugContainer.firstChild);
-
-        el.innerHTML = `<div><span>${ ev.payload.address }</span></div><div>${ formatValuesForDebug(ev.payload.values) }</div>`;
-        setTimeout(() => { el.style.boxShadow = '#00ccff 0 0 0px'; })
-      } else{
-        el = <div app-debug-el app-col-50><div><span>{ ev.payload.address }</span></div><div>{ formatValuesForDebug(ev.payload.values) }</div></div> as Node;
-
-        el.style.boxShadow = '#00ccff 0 0 10px';
-        debugContainer.insertBefore(el, debugContainer.firstChild);
-
-        setTimeout(() => { el.style.boxShadow = '#00ccff 0 0 0px'; })
-        debugEls[ev.payload.address] = el;
-      }
-    })
-  }
-
-  onMount(() => {
-    createEffect(() => {
-      if(props.page() === 2)
-        startListening();
-      else
-        stopListening();
-    });
-  });
-
-  onCleanup(() => {
-    stopListening();
-  });
-
-  return (
-    <div app-page>
-      <h1>Debug</h1>
-
-      <div ref={debugContainer}>
-
-      </div>
-    </div>
-  )
-}

src/Components/Relays.tsx

···
-import './Relays.css';
-
-export let Relays = () => {
-  return (
-    <div app-page>
-      <h1>Relays</h1>
-    </div>
-  )
-}

src/Components/Settings.tsx

···
-import './Settings.css';
-
-export let Settings = () => {
-  return (
-    <div app-page>
-      <h1>Settings</h1>
-    </div>
-  )
-}

src/Components/Sidebar.css

···
-div[app-sidebar]{
-  position: fixed;
-  top: 10px;
-  left: 10px;
-
-  height: calc(100vh - 20px);
-  width: 200px;
-  padding: 0px;
-
-  background: #272e44;
-  border-radius: 5px;
-}
-
-div[app-sidebar-tab]{
-  padding: 10px;
-  cursor: pointer;
-  user-select: none;
-  -webkit-user-select: none;
-  transition: 0.1s;
-  margin: 10px;
-  border-radius: 5px;
-}
-
-div[app-sidebar-tab]:hover{
-  background: #5b6ca5;
-}
-
-div[app-sidebar-tab-dropped]{
-  position: absolute;
-  width: calc(100% - 20px);
-  bottom: 0px;
-}

src/Components/Sidebar.tsx

···
-import './Sidebar.css'
-
-export interface SidebarProps{
-  setPage: ( page: number ) => number
-}
-
-export let Sidebar = ( props: SidebarProps ) => {
-  return (
-    <>
-      <div app-sidebar>
-        <div app-sidebar-tab onClick={() => props.setPage(0)}>Actions</div>
-        <div app-sidebar-tab onClick={() => props.setPage(1)}>Relays</div>
-        <div app-sidebar-tab onClick={() => props.setPage(2)}>Debug</div>
-
-        <div app-sidebar-tab app-sidebar-tab-dropped onClick={() => props.setPage(3)}>Settings</div>
-      </div>
-    </>
-  )
-}

src/Components/TextInput.tsx src/components/TextInput.tsx

···
           onChange={() => props.change ? props.change(input.value) : null}
           onInput={onInput}
           onKeyDown={onKeyDown}
-          onFocusOut={() => setSuggestionsOpen(false)}
+          onFocusOut={() => setTimeout(() => {
+            setSuggestionsOpen(false);
+            suggestionsIndex = -1;
+          }, 100)}
           ref={input} />
 
         <Show when={suggestionsOpen()}>
···
 
                 input.value = thisEl.innerHTML;
                 setSuggestionsOpen(false);
+
+                props.change ? props.change(input.value) : null
+                suggestionsIndex = -1;
               }}>{ item }</div> }
             </For>
           </div>

src/Components/TriggerEl.tsx

···
-import { For } from "solid-js"
-import { Trigger } from "./Actions"
-import { TextInput } from "./TextInput"
-import { invoke } from "@tauri-apps/api/core"
-import { ActionType } from "../Structs/ActionType"
-
-export interface TriggerElProps{
-  trigger: Trigger,
-
-  onDelete: () => void,
-
-  onAddAction: ( value: any ) => void,
-  onDeleteAction: ( id: string, index: number ) => void,
-
-  onSetActionType: ( index: number, type: string | null ) => void,
-
-  onSetOSCAddress: ( address: string ) => void,
-}
-
-export let TriggerEl = ( { trigger, onDelete, onAddAction, onDeleteAction, onSetActionType, onSetOSCAddress }: TriggerElProps ) => {
-  let suggestOSCAddresses = async ( text: string ): Promise<string[]> => {
-    let addresses = await invoke<string[]>('get_addresses');
-    return addresses.filter(x => x.toLowerCase().includes(text.toLowerCase()));
-  }
-
-  let suggestActionNames = async ( text: string ): Promise<string[]> => {
-    let actions = await invoke<ActionType[]>('get_actions');
-    return actions.filter(x => x.name.toLowerCase().includes(text.toLowerCase())).map(x => x.name);
-  }
-
-  return (
-    <div app-trigger-el>
-      <div app-col>
-        OSC Address:
-        <div style={{ width: '400px', display: 'inline-block', "margin-left": '10px' }}>
-          <TextInput
-            placeholder="/avatar/parameters/MyValue"
-            value={ trigger.address }
-            requestSuggestions={suggestOSCAddresses}
-            change={onSetOSCAddress} />
-        </div>
-        <div app-icon style={{ 'margin-left': 'calc(100% - 545px)' }} onClick={onDelete}>
-          <img src="/assets/icons/trash-can-solid-full.svg" width="18" />
-        </div>
-      </div>
-
-      <br />
-      <For each={trigger.actions}>
-        { ( item, index ) => <div app-trigger-action>
-          <div app-col>
-            <div style={{ width: 'calc(100% - 40px)', height: '30px', display: 'flex', "justify-content": 'center', 'align-items': 'center' }}>
-              <TextInput
-                placeholder="Search Actions..."
-                requestSuggestions={suggestActionNames}
-                value={item.actionType}
-                change={async ( text: string ) => {
-                  let action = await invoke<ActionType>('get_action', { name: text });
-                  if(action)onSetActionType(index(), action.name);
-                  else onSetActionType(index(), null);
-                }} />
-            </div>
-            <div app-icon style={{ width: '40px' }} onClick={() => {
-              onDeleteAction(item.id, index());
-            }}>
-              <img src="/assets/icons/trash-can-solid-full.svg" width="18" />
-            </div>
-          </div>
-
-          <div>
-
-          </div>
-        </div> }
-      </For>
-
-      <br />
-      <div app-button onClick={() => {
-        onAddAction({ id: Math.random().toString().replace('0.', '') })
-      }}>Add Action +</div>
-    </div>
-  )
-}

src/ContextMenu/Canvas.tsx

···
+import { invoke } from "@tauri-apps/api/core";
+import { PositionInfo } from "../renderer";
+import { Node, NodeType } from "../structs/node";
+import { OSCMessage } from "../structs/OscMessage";
+import { screenToWorldSpace } from "../utils/interections";
+import { NodeManager } from "../Mangers/NodeManager";
+import { ContextMenuItem } from "../structs/ContextMenu";
+
+export let CanvasContextMenu: ContextMenuItem[] = [
+  {
+    text: "Add OSC Trigger Node",
+    clicked: ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
+      let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
+
+      let node: Node = {
+        name: 'OSC Trigger',
+        id: 'trigger',
+        x: pos[0],
+        y: pos[1],
+        w: 200,
+        h: 50,
+        inputs: [],
+        outputs: [],
+        selected: false,
+        statics: [
+          {
+            name: "OSC Trigger",
+            type: NodeType.OSCAddress,
+            value: null
+          },
+          {
+            name: "Parameter List",
+            type: NodeType.ParameterList,
+            value: []
+          }
+        ],
+        onStaticsUpdate: ( node ) => {
+          let address = node.statics[0].value;
+          let parameters = node.statics[1].value;
+
+          (async () => {
+            if(address){
+              let addresses = await invoke<OSCMessage[]>('get_addresses');
+              let msgDat = addresses.find(x => x.address == address);
+
+              if(!msgDat)return;
+
+              parameters = msgDat.values.map(x => { return { type: x.key, desc: '' }});
+              node.statics[1].value = parameters;
+            }
+
+            node.outputs.map(output => {
+              output.connections.map(partner => {
+                partner.connections = partner.connections.filter(x => x != output);
+              })
+            })
+            node.outputs = [];
+
+            node.outputs.push({
+              name: 'Flow',
+              type: NodeType.Flow,
+              connections: [],
+              parent: node,
+              index: 0
+            })
+
+            parameters.forEach(( dat: any, indx: number ) => {
+              let type: NodeType | null = null;
+
+              switch(dat.type){
+                case 'Int':
+                  type = NodeType.Int;
+                  break;
+                case 'Float':
+                  type = NodeType.Float;
+                  break;
+                case 'String':
+                  type = NodeType.String;
+                  break;
+                case 'Boolean':
+                  type = NodeType.Boolean;
+                  break;
+              }
+
+              if(type){
+                node.outputs.push({
+                  name: dat.desc === '' ? dat.type : dat.desc,
+                  type: type,
+                  connections: [],
+                  parent: node,
+                  index: indx + 1
+                })
+              }
+            });
+
+            node.h = 60 + (parameters.length + 1) * 30;
+          })();
+        }
+      };
+
+      NodeManager.Instance.AddNode(node);
+    },
+    hovered: false
+  },
+
+  {
+    text: "Conditional",
+    menu: {
+      items: [
+        {
+          text: "If Equals",
+          hovered: false,
+          clicked: ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
+            let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
+
+            let node: Node = {
+              name: 'If Equals',
+              id: 'ifeq',
+              x: pos[0],
+              y: pos[1],
+              w: 220,
+              h: 150,
+              inputs: [],
+              outputs: [],
+              selected: false,
+              statics: [],
+              onStaticsUpdate: ( _node ) => {}
+            };
+
+            node.inputs.push({
+              name: "Flow",
+              type: NodeType.Flow,
+              connections: [],
+              parent: node,
+              index: 0
+            });
+
+            node.inputs.push({
+              name: "Input 1",
+              type: NodeType.AnyTypeA,
+              connections: [],
+              parent: node,
+              index: 1
+            });
+
+            node.inputs.push({
+              name: "Input 2",
+              type: NodeType.AnyTypeA,
+              connections: [],
+              parent: node,
+              index: 2
+            });
+
+
+            node.outputs.push({
+              name: "Equal",
+              type: NodeType.Flow,
+              connections: [],
+              parent: node,
+              index: 0
+            });
+
+            node.outputs.push({
+              name: "Not Equal",
+              type: NodeType.Flow,
+              connections: [],
+              parent: node,
+              index: 1
+            });
+
+            NodeManager.Instance.AddNode(node);
+          }
+        },
+      ],
+      position: [ 0, 0 ],
+      size: [ 0, 0 ],
+      visible: true
+    },
+    hovered: false
+  },
+
+  {
+    text: "Statics",
+    menu: {
+      items: [
+        {
+          text: "String",
+          hovered: false,
+          clicked: ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
+            let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
+
+            let node: Node = {
+              name: 'String',
+              id: 'static-string',
+              x: pos[0],
+              y: pos[1],
+              w: 200,
+              h: 85,
+              inputs: [],
+              outputs: [],
+              selected: false,
+              statics: [],
+              onStaticsUpdate: ( _node ) => {}
+            };
+
+            node.outputs.push({
+              name: "String",
+              type: NodeType.String,
+              connections: [],
+              parent: node,
+              index: 0
+            });
+
+            NodeManager.Instance.AddNode(node);
+          }
+        },
+
+        {
+          text: "Int",
+          hovered: false,
+          clicked: ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
+            let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
+
+            let node: Node = {
+              name: 'Int',
+              id: 'static-int',
+              x: pos[0],
+              y: pos[1],
+              w: 200,
+              h: 85,
+              inputs: [],
+              outputs: [],
+              selected: false,
+              statics: [],
+              onStaticsUpdate: ( _node ) => {}
+            };
+
+            node.outputs.push({
+              name: "Int",
+              type: NodeType.Int,
+              connections: [],
+              parent: node,
+              index: 0
+            });
+
+            NodeManager.Instance.AddNode(node);
+          }
+        },
+      ],
+      position: [ 0, 0 ],
+      size: [ 0, 0 ],
+      visible: true
+    },
+    hovered: false
+  },
+
+  {
+    text: "OSC Actions",
+    menu: {
+      items: [
+        {
+          text: "Send Chatbox",
+          hovered: false,
+          clicked: ( e: MouseEvent, canvas: HTMLCanvasElement, position: PositionInfo ) => {
+            let pos = screenToWorldSpace(canvas, position, e.clientX, e.clientY);
+
+            let node: Node = {
+              name: 'Send Chatbox',
+              id: 'send-chatbox',
+              x: pos[0],
+              y: pos[1],
+              w: 200,
+              h: 120,
+              inputs: [],
+              outputs: [],
+              selected: false,
+              statics: [],
+              onStaticsUpdate: ( _node ) => {}
+            };
+
+            node.inputs.push({
+              name: "Flow",
+              type: NodeType.Flow,
+              connections: [],
+              parent: node,
+              index: 0
+            });
+
+            node.inputs.push({
+              name: "Value",
+              type: NodeType.String,
+              connections: [],
+              parent: node,
+              index: 1
+            });
+
+            NodeManager.Instance.AddNode(node);
+          }
+        },
+      ],
+      position: [ 0, 0 ],
+      size: [ 0, 0 ],
+      visible: true
+    },
+    hovered: false
+  },
+]

src/ContextMenu/Node.tsx

···
+import { NodeManager } from "../Mangers/NodeManager";
+import { PositionInfo } from "../renderer";
+import { Node } from "../structs/node";
+
+export let NodeContextMenu = ( clickedNode: Node ) => [
+  {
+    text: "Delete Node",
+    clicked: ( _e: MouseEvent, _canvas: HTMLCanvasElement, _position: PositionInfo ) => {
+      clickedNode!.inputs.map(input => {
+        input.connections.map(partner => {
+          partner.connections = partner.connections.filter(x => x != input);
+        })
+      })
+
+      clickedNode!.outputs.map(output => {
+        output.connections.map(partner => {
+          partner.connections = partner.connections.filter(x => x != output);
+        })
+      })
+
+      // TODO: If node is currently selected, deselect it.
+      NodeManager.Instance.RemoveNode(clickedNode!)
+    },
+    hovered: false
+  }
+]

src/ControlBar.css

···
+.control-bar{
+  position: fixed;
+  top: 20px;
+  left: 50px;
+  height: 40px;
+  z-index: 100;
+  width: calc(100vw - 100px);
+  background: #272e44;
+  border-radius: 20px;
+  display: flex;
+  padding: 10px 20px;
+  align-items: center;
+}
+
+.button{
+  padding: 5px 10px;
+  margin: 0 10px;
+  background: #445077;
+  border-radius: 5px;
+  transition: 0.1s;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+  width: fit-content;
+}
+
+.button:hover{
+  background: #363f5e;
+}

src/ControlBar.tsx

···
+import './ControlBar.css';
+
+import { Accessor, createSignal, For, Match, Show, Switch } from 'solid-js';
+import { Node, NodeType } from './structs/node';
+import { TextInput } from './components/TextInput';
+import { invoke } from '@tauri-apps/api/core';
+import { OSCMessage } from './structs/OscMessage';
+import { ParameterList } from './components/ParameterList';
+
+export interface ControlBarProps{
+  node: Accessor<Node | null>,
+  lockMovement: ( lock: boolean ) => void
+}
+
+export let ControlBar = ( props: ControlBarProps ) => {
+  return (
+    <div class="control-bar">
+      <For each={props.node()?.statics}>
+        { ( item ) => {
+          let [ popupOpen, setPopupOpen ] = createSignal(false);
+
+          return (
+            <div>
+              <Switch>
+                <Match when={item.type == NodeType.String}>
+                  { item.name }
+                  <div style={{ display: 'inline-block', 'margin-left': '10px' }}>
+
+                  </div>
+                </Match>
+                <Match when={item.type == NodeType.Int}>
+                  { item.name }
+                  <div style={{ display: 'inline-block', 'margin-left': '10px' }}>
+
+                  </div>
+                </Match>
+                <Match when={item.type == NodeType.Float}>
+                  { item.name }
+                  <div style={{ display: 'inline-block', 'margin-left': '10px' }}>
+
+                  </div>
+                </Match>
+                <Match when={item.type == NodeType.OSCAddress}>
+                  { item.name }
+                  <div style={{ display: 'inline-block', 'margin-left': '10px', width: '300px' }}>
+                    <TextInput
+                      placeholder='Enter OSC Address...'
+                      value={item.value || ''}
+                      requestSuggestions={async ( text: string ): Promise<string[]> => {
+                        let addresses = await invoke<OSCMessage[]>('get_addresses');
+                        return addresses.map(x => x.address).filter(x => x.toLowerCase().includes(text.toLowerCase()));
+                      }}
+                      change={( text ) => {
+                        let node = props.node()!;
+
+                        item.value = text;
+                        node.onStaticsUpdate(node);
+                      }} />
+                  </div>
+                </Match>
+                <Match when={item.type == NodeType.ParameterList}>
+                  <div class="button" onClick={() => {
+                    let popup = !popupOpen();
+
+                    props.lockMovement(popup);
+                    setPopupOpen(popup);
+                  }}>
+                    { item.name }
+                  </div>
+                  <Show when={popupOpen()}>
+                    <ParameterList
+                      setPopupOpen={( open: boolean ) => {
+                        setPopupOpen(open);
+                        props.lockMovement(open);
+                      }}
+                      value={item.value}
+                      changed={( value ) => {
+                        let node = props.node()!;
+
+                        item.value = value;
+                        node.onStaticsUpdate(node);
+                      }} />
+                  </Show>
+                </Match>
+              </Switch>
+            </div>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

src/Mangers/NodeManager.tsx

···
+import { Node } from "../structs/node";
+
+export class NodeManager{
+  public static Instance: NodeManager;
+
+  private _nodes: Node[] = [];
+
+  constructor(){
+    NodeManager.Instance = this;
+  }
+
+  public AddNode( node: Node ){
+    this._nodes.push(node);
+  }
+
+  public RemoveNode( node: Node ){
+    this._nodes = this._nodes.filter(x => x !== node);
+  }
+
+  public GetNodes(): Node[]{
+    return this._nodes;
+  }
+}

src/Structs/ActionType.ts

···
-export interface ActionType{
-  name: string,
-  parameters: any[]
-}

src/Structs/OSCMessage.ts

···
-export interface OSCMessage{
-  address: string,
-  values: OSCValue[]
-}
-
-export interface OSCValue{
-  Float?: number,
-  Int?: number,
-  Boolean?: boolean,
-  String?: string
-}

src/components/ParameterList.css

···
+.parameter-list{
+  position: fixed;
+  z-index: 100;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  background: rgba(0, 0, 0, 0.75);
+}
+
+.parameter-list-inner{
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  padding: 10px;
+  background: #373738;
+  border-radius: 10px;
+  width: 40%;
+  height: 80%;
+}
+
+.parameter-list-close{
+  width: 25px;
+  height: 43px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.parameter-list-header{
+  width: 100%;
+  height: 50px;
+}
+
+.parameter-list-content{
+  width: 100%;
+  height: calc(100% - 50px);
+  overflow-x: hidden;
+  overflow-y: auto;
+}
+
+.parameter-list-button-dropdown{
+  position: fixed;
+  padding: 5px 10px;
+  margin: 0 10px;
+  background: #445077;
+  border-radius: 5px;
+  transition: 0.1s;
+  cursor: pointer;
+  user-select: none;
+  transform: translate(0, 5px);
+  -webkit-user-select: none;
+}
+
+.parameter-list-button-dropdown > div{
+  transition: 0.1s;
+}
+
+.parameter-list-button-dropdown > div:hover{
+  color: #aaa;
+}

src/components/ParameterList.tsx

···
+import { createSignal, For, Show } from 'solid-js';
+import './ParameterList.css';
+
+export interface ParameterListProps{
+  setPopupOpen: ( open: boolean ) => void
+  value: { type: string, desc: string }[],
+  changed: ( value: { type: string, desc: string }[] ) => void
+}
+
+export let ParameterList = ( props: ParameterListProps ) => {
+  let [ parameters, setParameters ] = createSignal<{ type: string, desc: string }[]>(props.value, { equals: false });
+  let [ addParametersOpen, setAddParametersOpen ] = createSignal(false);
+
+  return (
+    <div class="parameter-list">
+      <div class="parameter-list-inner">
+        <div class="parameter-list-header">
+          <h1 style={{ float: 'left' }}>Parameter List</h1>
+          <div style={{ float: 'right' }} class="parameter-list-close">
+            <div style={{ background: 'red', width: '25px', height: '25px', cursor: 'pointer' }} onClick={() => props.setPopupOpen(false)}></div>
+          </div>
+        </div>
+        <div class="parameter-list-content">
+          <For each={parameters()}>
+            { i => <div>{ JSON.stringify(i) }</div>}
+          </For>
+          <div class="button" onClick={() => { setAddParametersOpen(!addParametersOpen()) }}>Add Parameter + </div>
+          <Show when={addParametersOpen()}>
+            <div class="parameter-list-button-dropdown">
+              <div onClick={() => {
+                setAddParametersOpen(false);
+
+                let params = parameters();
+                params.push({ type: 'Float', desc: '' });
+
+                setParameters(params);
+                props.changed(params);
+              }}>Float Parameter</div>
+              <div onClick={() => {
+                setAddParametersOpen(false);
+
+                let params = parameters();
+                params.push({ type: 'Int', desc: '' });
+
+                setParameters(params);
+                props.changed(params);
+              }}>Integer Parameter</div>
+              <div onClick={() => {
+                setAddParametersOpen(false);
+
+                let params = parameters();
+                params.push({ type: 'Boolean', desc: '' });
+
+                setParameters(params);
+                props.changed(params);
+              }}>Boolean Parameter</div>
+            </div>
+          </Show>
+        </div>
+      </div>
+    </div>
+  )
+}

src/index.tsx

···
 import { render } from "solid-js/web";
 import App from "./App";
 
+import { NodeManager } from "./Mangers/NodeManager";
+
 render(() => <App />, document.getElementById("root") as HTMLElement);
+
+new NodeManager();

src/renderer.ts

···
+import { ContextMenu } from "./structs/ContextMenu";
+import { Node, NodeIO, NodeIOLinkColours } from "./structs/node";
+import { lerp } from "./utils/lerp";
+
+export interface PositionInfo{
+  x: number,
+  y: number,
+  scale: number
+}
+
+const GRID_SIZE = 50;
+
+export let renderBackgroundGrid = (
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+  position: PositionInfo
+) => {
+  let offsetX = position.x % 50;
+  let offsetY = position.y % 50;
+
+  let gridAmountX = canvas.width / (GRID_SIZE * position.scale);
+  let gridAmountY = canvas.height / (GRID_SIZE * position.scale);
+
+  ctx.fillStyle = '#fff1';
+
+  for (let x = 0; x < gridAmountX / 2; x++) {
+    for (let y = 0; y < gridAmountY / 2; y++) {
+      ctx.fillRect(
+        ((x * GRID_SIZE) + offsetX) * position.scale,
+        ((y * GRID_SIZE) + offsetY) * position.scale,
+        5 * position.scale, 5 * position.scale);
+
+      ctx.fillRect(
+        (((x + 1) * GRID_SIZE) - offsetX) * -position.scale,
+        ((y * GRID_SIZE) + offsetY) * position.scale,
+        5 * position.scale, 5 * position.scale);
+
+      ctx.fillRect(
+        ((x * GRID_SIZE) + offsetX) * position.scale,
+        (((y + 1) * GRID_SIZE) - offsetY) * -position.scale,
+        5 * position.scale, 5 * position.scale);
+
+      ctx.fillRect(
+        (((x + 1) * GRID_SIZE) - offsetX) * -position.scale,
+        (((y + 1) * GRID_SIZE) - offsetY) * -position.scale,
+        5 * position.scale, 5 * position.scale);
+    }
+  }
+}
+
+export let renderNodes = (
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+  nodes: Node[],
+  position: PositionInfo
+) => {
+  let startX = canvas.width / -2;
+  let startY = canvas.height / -2;
+
+  ctx.textBaseline = 'top';
+
+  nodes.map(node => {
+    ctx.fillStyle = '#1f2129';
+    ctx.strokeStyle = node.selected ? '#004696ff' : '#fff5';
+    ctx.lineWidth = 5 * position.scale;
+
+    // Draw Node Box
+    drawRoundedRect(ctx,
+      (node.x + startX + position.x) * position.scale,
+      (node.y + startY + position.y) * position.scale,
+      node.w * position.scale,
+      node.h * position.scale,
+      10 * position.scale);
+
+    ctx.stroke();
+    ctx.fill();
+
+    // Draw Node Name
+    ctx.fillStyle = '#fff';
+    ctx.font = (25 * position.scale) + 'px Comic Mono';
+    ctx.textAlign = 'center';
+
+    ctx.fillText(node.name,
+      (node.x + (node.w * 0.5) + startX + position.x) * position.scale,
+      (node.y + 10 + startY + position.y) * position.scale
+    );
+
+    // Draw Inputs
+    ctx.font = (15 * position.scale) + 'px Comic Mono';
+    ctx.textAlign = 'left';
+
+    node.inputs.map(( input, i ) => {
+      ctx.fillStyle = NodeIOLinkColours(input);
+      ctx.fillRect(
+        (node.x + 10 + startX + position.x) * position.scale,
+        (node.y + 50 + (30 * i) + startY + position.y) * position.scale,
+        20 * position.scale, 20 * position.scale
+      )
+
+      ctx.fillText(input.name,
+        (node.x + 35 + startX + position.x) * position.scale,
+        (node.y + 53 + (30 * i) + startY + position.y) * position.scale,
+      )
+    })
+
+    // Draw Outputs
+    ctx.textAlign = 'right';
+
+    node.outputs.map(( output, i ) => {
+      ctx.fillStyle = NodeIOLinkColours(output);
+      ctx.fillRect(
+        (node.x + (node.w - 30) + startX + position.x) * position.scale,
+        (node.y + 50 + (30 * i) + startY + position.y) * position.scale,
+        20 * position.scale, 20 * position.scale
+      )
+
+      ctx.fillText(output.name,
+        (node.x + (node.w - 35) + startX + position.x) * position.scale,
+        (node.y + 53 + (30 * i) + startY + position.y) * position.scale,
+      )
+    })
+  })
+
+  nodes.map(node => {
+    node.outputs.map(( output, i ) => {
+      output.connections.map(partner => {
+        ctx.strokeStyle = NodeIOLinkColours(output);
+        drawCurve(ctx,
+          (node.x + (node.w - 30) + 10 + startX + position.x) * position.scale,
+          (node.y + 50 + (30 * i) + 10 + startY + position.y) * position.scale,
+          (partner.parent.x + 20 + startX + position.x) * position.scale,
+          (partner.parent.y + 60 + (30 * partner.index) + startY + position.y) * position.scale,
+        );
+        ctx.stroke();
+      })
+    })
+  })
+}
+
+export let renderContextMenu = (
+  ctx: CanvasRenderingContext2D,
+  contextMenu: ContextMenu
+) => {
+  if(contextMenu.visible){
+    ctx.font = '20px Arial';
+    ctx.textBaseline = 'top';
+    ctx.textAlign = 'left';
+
+    let widestItem = 0;
+    contextMenu.items.map(x => {
+      let width = ctx.measureText(x.text).width;
+      if(widestItem < width)widestItem = width;
+    });
+
+    contextMenu.size = [ widestItem + 20, 25 * contextMenu.items.length + 20 ]
+
+    drawRoundedRect(ctx, contextMenu.position[0], contextMenu.position[1], contextMenu.size[0], contextMenu.size[1], 10);
+    ctx.fillStyle = '#444';
+    ctx.fill();
+
+    let submenuToRender: any = null;
+
+    contextMenu.items.map((x, i) => {
+      ctx.fillStyle = x.hovered ? '#aaa' : '#fff';
+      ctx.fillText(x.text, contextMenu.position[0] + 10, contextMenu.position[1] + 10 + 25 * i);
+
+      if(x.hovered && x.menu){
+        submenuToRender = x.menu;
+        submenuToRender.position = [ contextMenu.position[0] + contextMenu.size[0] + 5, contextMenu.position[1] + 25 * i ];
+      }
+    });
+
+    if(submenuToRender){
+      renderContextMenu(ctx, submenuToRender);
+    }
+  }
+}
+
+export let renderTempDrawing = (
+  canvas: HTMLCanvasElement,
+  ctx: CanvasRenderingContext2D,
+  drawingTo: [ number, number ],
+  drawingFrom: NodeIO,
+  position: PositionInfo
+) => {
+  let startX = canvas.width / -2;
+  let startY = canvas.height / -2;
+
+  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(
+    (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.strokeStyle = NodeIOLinkColours(drawingFrom);
+  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,
+    (drawingTo[0] + 10 + startX + position.x) * position.scale,
+    (drawingTo[1] + 10 + startY + position.y) * position.scale,
+  );
+  ctx.stroke();
+}
+
+let drawCurve = ( ctx: CanvasRenderingContext2D, fromX: number, fromY: number, toX: number, toY: number ) => {
+  ctx.beginPath();
+
+  let bias = Math.sqrt(( fromX - toX ) * ( fromX - toX ) + ( fromY - toY ) * ( fromY - toY )) / 3;
+
+  let start = [ fromX + bias, fromY ];
+  let end = [ toX - bias, toY ];
+
+  let midpoint = [
+    lerp(start[0], end[0], 0.5),
+    lerp(start[1], end[1], 0.5)
+  ];
+
+  ctx.bezierCurveTo(fromX, fromY, start[0], start[1], midpoint[0], midpoint[1]);
+  ctx.bezierCurveTo(midpoint[0], midpoint[1], end[0], end[1], toX, toY);
+}
+
+let drawRoundedRect = ( ctx: CanvasRenderingContext2D, x: number, y: number, w: number, h: number, radius: number ) => {
+  ctx.beginPath();
+  ctx.arc(x + radius, y + radius, radius, Math.PI, Math.PI * 1.5);
+  ctx.lineTo(x + w - radius, y);
+  ctx.arc(x + w - radius, y + radius, radius, Math.PI * 1.5, 0);
+  ctx.lineTo(x + w, y + h - radius);
+  ctx.arc(x + w - radius, y + h - radius, radius, 0, Math.PI * 0.5);
+  ctx.lineTo(x + radius, y + h);
+  ctx.arc(x + radius, y + h - radius, radius, Math.PI * 0.5, Math.PI);
+  ctx.closePath();
+}

src/structs/ContextMenu.ts

···
+import { PositionInfo } from "../renderer";
+import { Node } from "./node";
+
+export interface ContextMenuItem{
+  text: string,
+  hovered: boolean,
+  clicked?: ( e: MouseEvent, canvas: HTMLCanvasElement, pos: PositionInfo, clickedNode?: Node ) => void,
+  menu?: ContextMenu
+}
+
+export interface ContextMenu{
+  items: ContextMenuItem[];
+  position: [ number, number ];
+  size: [ number, number ];
+  visible: boolean;
+}

src/structs/OscMessage.ts

···
+export interface OSCMessage{
+  address: string,
+  values: OSCValue[]
+}
+
+export interface OSCValue{
+  key: string,
+  value: any
+}

src/structs/node.ts

···
+export interface Node{
+  name: string,
+  id: string,
+  x: number,
+  y: number,
+  w: number,
+  h: number,
+  inputs: NodeIO[],
+  outputs: NodeIO[],
+  selected: boolean,
+  statics: NodeStatic[],
+  onStaticsUpdate: ( node: Node ) => void
+}
+
+export interface NodeIO{
+  name: string,
+  type: NodeType,
+  connections: NodeIO[],
+  parent: Node,
+  index: number
+}
+
+export enum NodeType{
+  Label,
+
+  String = 1,
+  Float = 2,
+  Int = 3,
+  Boolean = 4,
+  Flow = 5,
+
+  AnyTypeA = 6,
+  AnyTypeB = 7,
+  AnyTypeC = 8,
+
+  OSCAddress,
+  ParameterList
+}
+
+export let NodeIOResolveAnyTypes = ( nodeio: NodeIO ): NodeType | null => {
+  if(nodeio.type > 0 && nodeio.type < 6){
+    // It's a base type
+    return nodeio.type;
+  }
+
+  // It's an "AnyType" value and we should resolve it,
+  // it also means it's an input as "AnyType" is not valid on outputs
+  let type = nodeio.type;
+
+  // Check if we have any connections
+  if(nodeio.connections.length > 0){
+    // We do, lets copy the type of the first input
+    return nodeio.connections[0].type;
+  }
+
+  // Check if there are any others of the same "AnyType"
+  let other = nodeio.parent.inputs.filter(x => x !== nodeio).find(x => x.type === type);
+  if(other){
+    // There are others with the same type, lets copy that type
+    // Does other have any connections
+
+    if(other.connections.length > 0){
+      return other.connections[0].type;
+    }
+  }
+
+  // We can't resolve it yet
+  return null;
+}
+
+export let NodeIOLinkColours = ( nodeio: NodeIO ) => {
+  let cols: any = {
+    1: '#ffff9f',
+    2: '#cda0cb',
+    3: '#7ecaca',
+    4: '#8bc0a2',
+    5: '#edeae3'
+  }
+
+  let type = NodeIOResolveAnyTypes(nodeio);
+  return type ? cols[type] : '#fff5';
+}
+
+export interface NodeStatic{
+  name: string,
+  type: NodeType,
+  value: any
+}

src/utils/interections.ts

···
+import { PositionInfo } from "../renderer";
+
+export let screenToWorldSpace = ( canvas: HTMLCanvasElement, position: PositionInfo, pointX: number, pointY: number ) => {
+  let startX = canvas.width / -2;
+  let startY = canvas.height / -2;
+
+  let worldX = ((pointX + startX) / position.scale) - position.x - startX;
+  let worldY = ((pointY + startY) / position.scale) - position.y - startY;
+
+  return [ worldX, worldY ];
+}
+
+export let isPointInRectApplyOffset = ( canvas: HTMLCanvasElement, position: PositionInfo, pointX: number, pointY: number, rectX: number, rectY: number, rectW: number, rectH: number ): boolean => {
+  let startX = canvas.width / -2;
+  let startY = canvas.height / -2;
+
+  let screenPointX = (pointX + startX);
+  let screenPointY = (pointY + startY);
+
+  let rectScreenX = (rectX + startX + position.x) * position.scale;
+  let rectScreenY = (rectY + startY + position.y) * position.scale;
+  let rectScreenW = rectW * position.scale;
+  let rectScreenH = rectH * position.scale;
+
+  return (
+    screenPointX > rectScreenX &&
+    screenPointX < rectScreenX + rectScreenW &&
+    screenPointY > rectScreenY &&
+    screenPointY < rectScreenY + rectScreenH
+  )
+}
+
+export let isPointInRect = ( canvas: HTMLCanvasElement, pointX: number, pointY: number, rectX: number, rectY: number, rectW: number, rectH: number ): boolean => {
+  return (
+    pointX > canvas.width / 2 + rectX &&
+    pointX < canvas.width / 2 + rectX + rectW &&
+    pointY > canvas.height / 2 + rectY &&
+    pointY < canvas.height / 2 + rectY + rectH
+  )
+}

src/utils/lerp.ts

···
+export let lerp = ( a: number, b: number, t: number ): number => a + ( b - a ) * t;