feat: style checkboxes better

app/src/lib/graph-interface/graph/Graph.svelte

@@ -60,8 +60,8 @@
     edges: [number, number, number, string][];
   } = null;
 
-  let width = globalThis?.innerWidth ?? 100;
+  let width = rect?.width ?? 100;
-  let height = globalThis?.innerHeight ?? 100;
+  let height = rect?.height ?? 100;
 
   let cameraBounds = [-1000, 1000, -1000, 1000];
   $: cameraBounds = [

app/src/lib/node-store/BreadCrumbs.svelte

@@ -44,7 +44,8 @@
     align-items: center;
     padding: 0.4em;
     gap: 0.8em;
-    height: 1em;
+    height: 35px;
+    box-sizing: border-box;
     border-bottom: solid thin var(--outline);
   }
   .breadcrumbs > button {

app/src/lib/runtime-executor.ts

@@ -204,7 +204,7 @@ export class MemoryRuntimeExecutor implements RuntimeExecutor {
 
           // console.log(`${a2 - a1}ms TRANSFORMED_INPUTS`);
 
-          const encoded_inputs = concatEncodedArrays(transformed_inputs);
+          const encoded_inputs = encodeNestedArray(transformed_inputs);
           const a3 = performance.now();
           console.groupCollapsed(`executing ${node_type.id || node.id}`);
           console.log(`Inputs:`, transformed_inputs);

app/src/lib/settings/NestedSettings.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { NodeInput } from "@nodes/types";
-  import Input, { Details } from "@nodes/ui";
+  import Input from "@nodes/ui";
   import type { Writable } from "svelte/store";
 
   interface Nested {
@@ -11,7 +11,7 @@
   export let store: Writable<Record<string, any>>;
   export let depth = 0;
 
-  const keys = Object.keys(settings);
+  const keys = Object.keys(settings).filter((key) => key !== "__title");
   function isNodeInput(v: NodeInput | Nested): v is NodeInput {
     return "type" in v;
   }
@@ -24,7 +24,7 @@
       <div class="input input-{settings[key].type}">
         {#if settings[key].type === "button"}
           <button on:click={() => settings[key]?.callback?.()}
-            >{key || settings[key].label}</button
+            >{settings[key].label || key}</button
           >
         {:else}
           <label for={key}>{settings[key].label || key}</label>
@@ -37,7 +37,7 @@
       </div>
     {:else}
       <details>
-        <summary>{key}</summary>
+        <summary>{settings[key]?.__title || key}</summary>
         <div class="content">
           <svelte:self settings={settings[key]} {store} depth={depth + 1} />
         </div>

app/src/lib/settings/app-settings.ts

@@ -35,26 +35,32 @@ export const AppSettingTypes = {
     value: true,
   },
   nodeInterface: {
+    __title: "Node Interface",
     showNodeGrid: {
       type: "boolean",
+      label: "Show Grid",
       value: true
     },
     snapToGrid: {
       type: "boolean",
+      label: "Snap to Grid",
       value: true
     }
   },
   stressTest: {
+    __title: "Stress Test",
     amount: {
       type: "integer",
       min: 2,
       max: 15
     },
     loadGrid: {
-      type: "button"
+      type: "button",
+      label: "Load Grid"
     },
     loadTree: {
-      type: "button"
+      type: "button",
+      label: "Load Tree"
     },
   },
   debug: {

app/src/routes/+page.svelte

@@ -138,7 +138,7 @@
 
 <style>
   header {
-    border-bottom: solid thin var(--outline);
+    /* border-bottom: solid thin var(--outline); */
     background-color: var(--layer-1);
   }
 
@@ -147,7 +147,7 @@
     width: 100vw;
     color: white;
     display: grid;
-    grid-template-rows: 50px 1fr;
+    grid-template-rows: 0px 1fr;
   }
 
   .wrapper :global(canvas) {

packages/ui/src/lib/elements/Checkbox.svelte

@@ -11,3 +11,86 @@
 </script>
 
 <input {id} type="checkbox" bind:checked={value} />
+<label for={id}>
+  <svg viewBox="0 0 19 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path
+      d="M2 7L7 12L17 2"
+      stroke="currentColor"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</label>
+
+<style>
+  input[type="checkbox"] {
+    position: absolute;
+    overflow: hidden;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    width: 1px;
+    margin: -1px;
+    padding: 0;
+    border: 0;
+  }
+  #inputPreview {
+    display: flex;
+    gap: 20px;
+    justify-content: center;
+  }
+  input + label {
+    position: relative;
+    font-size: 14px;
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    height: 22px;
+    color: rgb(0, 0, 0);
+  }
+  input + label::before {
+    content: " ";
+    display: inline;
+    vertical-align: middle;
+    margin-right: 3px;
+    width: 22px;
+    height: 22px;
+    background-color: var(--layer-2);
+    border-radius: 5px;
+    border: none;
+    box-shadow: none;
+  }
+  input:checked + label::after {
+    content: " ";
+    background-repeat: no-repeat;
+    background-size: 12px 12px;
+    background-position: center center;
+    position: absolute;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-left: 0px;
+    left: 0px;
+    top: 0px;
+    text-align: center;
+    background-color: transparent;
+    color: red;
+    font-size: 10px;
+    height: 22px;
+    width: 22px;
+  }
+
+  input + label > svg {
+    position: absolute;
+    display: none;
+    width: 12px;
+    height: 10px;
+    left: 5px;
+    color: var(--text-color);
+    top: 5.9px;
+  }
+
+  input:checked + label > svg {
+    display: block;
+  }
+</style>

packages/utils/src/flatTree.test.ts

@@ -1,15 +1,15 @@
 import { expect, test } from 'vitest'
-import { decode, encode, concat_encoded } from './flatTree'
+import { decodeNestedArray, encodeNestedArray, concatEncodedArrays } from './flatTree'
 
 test("it correctly concats nested arrays", () => {
 
-  const input_a = encode([1, 2, 3]);
+  const input_a = encodeNestedArray([1, 2, 3]);
   const input_b = 2;
-  const input_c = encode([4, 5, 6]);
+  const input_c = encodeNestedArray([4, 5, 6]);
 
-  const output = concat_encoded([input_a, input_b, input_c]);
+  const output = concatEncodedArrays([input_a, input_b, input_c]);
 
-  const decoded = decode(output);
+  const decoded = decodeNestedArray(output);
 
   expect(decoded[0]).toEqual([1, 2, 3]);
 
@@ -19,49 +19,49 @@ test("it correctly concats nested arrays", () => {
 // Original test case
 test('it correctly decodes/encodes complex nested arrays', () => {
   const input = [5, [6, 1], 1, 5, [5], [7, 2, [5, 1]]];
-  const decoded = decode(encode(input));
+  const decoded = decodeNestedArray(encodeNestedArray(input));
   expect(decoded).toEqual(input);
 });
 
 // Test with empty array
 test('it correctly handles an empty array', () => {
   const input: number[] = [];
-  const decoded = decode(encode(input));
+  const decoded = decodeNestedArray(encodeNestedArray(input));
   expect(decoded).toEqual(input);
 });
 
 // Test with nested empty arrays
 test('it correctly handles nested empty arrays', () => {
   const input = [5, [], [6, []], []];
-  const decoded = decode(encode(input));
+  const decoded = decodeNestedArray(encodeNestedArray(input));
   expect(decoded).toEqual(input);
 });
 
 // Test with single-element array
 test('it correctly handles a single-element array', () => {
   const input = [42];
-  const decoded = decode(encode(input));
+  const decoded = decodeNestedArray(encodeNestedArray(input));
   expect(decoded).toEqual(input);
 });
 
 // Test with deeply nested array
 test('it correctly handles deeply nested arrays', () => {
   const input = [[[[[1]]]]];
-  const decoded = decode(encode(input));
+  const decoded = decodeNestedArray(encodeNestedArray(input));
   expect(decoded).toEqual(input);
 });
 
 // Test with large numbers
 test('it correctly handles large numbers', () => {
   const input = [2147483647, [-2147483648, 1234567890]];
-  const decoded = decode(encode(input));
+  const decoded = decodeNestedArray(encodeNestedArray(input));
   expect(decoded).toEqual(input);
 });
 
 // Test with sequential nesting
 test('it correctly handles sequential nesting', () => {
   const input = [1, [2, [3, [4, [5]]]]];
-  const decoded = decode(encode(input));
+  const decoded = decodeNestedArray(encodeNestedArray(input));
   expect(decoded).toEqual(input);
 });
 
@@ -71,6 +71,6 @@ test('it correctly handles sequential nesting', () => {
 test('it correctly handles arrays with mixed data types', () => {
   const input = [1, 'text', [true, [null, ['another text']]]];
   //@ts-ignore
-  const decoded = decode(encode(input));
+  const decoded = decodeNestedArray(encodeNestedArray(input));
   expect(decoded).toEqual(input);
 });

packages/utils/src/tree.rs

@@ -39,9 +39,6 @@ pub fn get_args(args: &[i32]) -> Vec<&[i32]> {
                 // skip over the bracket encoding
                 idx += 2;
             } else {
-                if depth == 1 {
-                    arg_start_index = idx + 2;
-                }
                 // skip to the next bracket if we are at depth > 0
                 idx = next_bracket_index;
             }
@@ -60,12 +57,6 @@ pub fn get_args(args: &[i32]) -> Vec<&[i32]> {
         idx += 1;
     }
 
-    println!("idx: {}, length: {}, asi: {}", idx, length, arg_start_index);
-
-    if arg_start_index < length {
-        out_args.push(&args[arg_start_index..]);
-    }
-
     out_args
 }
 
@@ -111,8 +102,6 @@ pub fn wrap_arg(arg: &[i32]) -> Vec<i32> {
 pub fn evaluate_node(input_args: &[i32]) -> i32 {
     let node_type = input_args[0];
 
-    println!("node_type: {} -> {:?}", node_type, input_args);
-
     match node_type {
         0 => crate::nodes::math_node(&input_args[1..]),
         1 => crate::nodes::random_node(&input_args[1..]),
@@ -156,8 +145,6 @@ pub fn evaluate_int(input_args: &[i32]) -> i32 {
 
     let args = get_args(input_args);
 
-    println!("args: {:?}", args);
-
     let mut resolved: Vec<i32> = Vec::new();
 
     for arg in args {
@@ -194,7 +181,7 @@ mod tests {
 
         // this should be the output
         /* [
-            [ 0, 2, 1048576000, 0, 20, 0, 4, 0, 0, 1073741824, 0, 9, 0, 5, 0, 0, 1073741824, 1073741824, 1, 1, 1, 0, 1, 1, 1, 4, 1041865114 ],
+            [ 0, 28, 0, 2, 1048576000, 0, 20, 0, 4, 0, 0, 1073741824, 0, 9, 0, 5, 0, 0, 1073741824, 1073741824, 1, 1, 1, 0, 1, 1, 1, 4, 1041865114 ],
             1086324736,
             1053609165,
             54
@@ -204,7 +191,7 @@ mod tests {
         let args = get_args(&input);
         println!("{:?}", args[0]);
 
-        assert_eq!(args[0].len(), 27);
+        assert_eq!(args[0].len(), 29);
         assert_eq!(args[1][0], 1086324736);
         assert_eq!(args[2][0], 1053609165);
     }
@@ -230,6 +217,8 @@ mod tests {
 
         let args = get_args(&input_a);
 
+        println!("{:?}", args);
+
         assert_eq!(args.len(), 4);
         assert_eq!(args[0], [1]);
         assert_eq!(args[1], [2]);