add actual parameter list

src-tauri/src/frontend_calls/settings.rs

···
 
 #[tauri::command]
 pub fn get_hide_editor_on_app_start( conf: State<Config> ) -> bool {
-  let mut config = conf.store.lock().unwrap();
+  let config = conf.store.lock().unwrap();
   config.hide_editor_on_start
 }

src-tauri/src/lib.rs

···
 mod utils;
 mod runtime;
 
+// TODO: Add built-in OSC endpoints
+
 #[cfg_attr(mobile, tauri::mobile_entry_point)]
 #[tokio::main]
 pub async fn run() {

src/App.tsx

···
 import { ContextMenu } from "./structs/ContextMenu";
 import { NodeManager } from "./Mangers/NodeManager";
 import { TabMenu } from "./components/TabMenu";
-import { ConfirmationPopup } from "./components/ConfirmationPopup";
 
 import * as keybinds from './keybinds';
+import { listen } from "@tauri-apps/api/event";
 
 let App = () => {
   let [ selectedNode, setSelectedNode ] = createSignal<Node | null>(null);
···
     visible: false
   }
 
-  onMount(() => {
+  onMount(async () => {
     NodeManager.Instance.HookTabChange(() => setSelectedNode(null));
 
     ctx = canvas.getContext('2d')!;
···
 
     keybinds.load(selectedNode, setSelectedNode);
     requestAnimationFrame(update);
+
+    let unlisten_0 = await listen('hide-window', () => {
+      stopRender = true;
+    })
+
+    let unlisten_1 = await listen('show-window', () => {
+      if(stopRender)window.location.reload();
+    })
+
+    onCleanup(() => {
+      stopRender = true;
+      window.clearInterval(interval);
+
+      unlisten_0();
+      unlisten_1();
+    });
   });
 
-  let update = () => { // TODO: Start/Stop render when app is minimised
+  let update = () => {
     if(stopRender)return;
-
     scale = lerp(scale, targetScale, 0.25);
 
     offset[0] = lerp(offset[0], offsetTarget[0], 0.5);
···
     }
   }, 1000);
 
-  onCleanup(() => {
-    stopRender = true;
-    window.clearInterval(interval);
-  });
-
   return (
     <>
-      <ConfirmationPopup />
       <TabMenu />
       <ControlBar node={selectedNode} lockMovement={( lock ) => lockMovement = lock} />
       <canvas ref={canvas}/>

src/components/ParameterList.css

···
 
 .parameter-list-button-dropdown > div:hover{
   color: #aaa;
+}
+
+.parameter-list-parameter{
+  display: inline-block;
+  padding: 5px 10px;
+  margin: 5px 0px 5px 10px;
+  background: #445077;
+  border-radius: 5px;
+  transition: 0.1s;
+  cursor: pointer;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.parameter-list-parameter:hover{
+  background: #363f5e;
+}
+
+.parameter-list-parameter-delete{
+  padding: 0px 5px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/components/ParameterList.tsx

···
   changed: ( value: { type: string, desc: string }[] ) => void
 }
 
-// TODO: An actual parameter list
 export let ParameterList = ( props: ParameterListProps ) => {
   let [ parameters, setParameters ] = createSignal<{ type: string, desc: string }[]>(props.value, { equals: false });
   let [ addParametersOpen, setAddParametersOpen ] = createSignal(false);
···
         </div>
         <div class="parameter-list-content">
           <For each={parameters()}>
-            { i => <div>{ JSON.stringify(i) }</div>}
+            { ( i, index ) => <div style={{ display: 'flex' }}>
+              <div class="parameter-list-parameter">{ i.desc === "" ? i.type : i.desc + ` ${i.type}` }</div>
+              <div class="parameter-list-parameter parameter-list-parameter-delete" onClick={() => {
+                let params = parameters();
+                params.splice(index(), 1);
+
+                setParameters(params);
+                props.changed(params);
+              }}>
+                <img src="/assets/icons/trash-can-solid-full.svg" width="20" />
+              </div>
+            </div>}
           </For>
           <div class="button" onClick={() => { setAddParametersOpen(!addParametersOpen()) }}>Add Parameter + </div>
           <Show when={addParametersOpen()}>

src/keybinds.ts

···
 let isKeyDown: any = {};
 
 export let load = ( selectedNode: Accessor<Node | null>, setSelectedNode: Setter<Node | null> ) => {
-  // TODO: Keybind system
   // TODO: Copy / paste
   // TODO: Add undo / redo -ing