From c1c7b4113502d5cf4413b28bc0c05662c5756691 Mon Sep 17 00:00:00 2001
From: Jake <realrobotshk@gmail.com>
Date: Mon, 3 Nov 2025 10:17:07 +0800
Subject: [PATCH] new node editor (slicker controls) implemented

---
 index.html                   |   29 +-
 nodeeditor/Control.js        |  672 +++++++++++++++++++
 nodeeditor/Node.js           |  404 ++++++++++++
 nodeeditor/NodeEditor.js     | 1201 ++++++++++++++++++----------------
 nodeeditor/NodeSerializer.js |  224 +++++++
 nodeeditor/canvastools.js    |  217 ------
 nodeeditor/nodes.js          |  668 -------------------
 script.js                    |    5 +-
 8 files changed, 1942 insertions(+), 1478 deletions(-)
 create mode 100644 nodeeditor/Control.js
 create mode 100644 nodeeditor/Node.js
 create mode 100644 nodeeditor/NodeSerializer.js
 delete mode 100644 nodeeditor/canvastools.js
 delete mode 100644 nodeeditor/nodes.js

diff --git a/index.html b/index.html
index c02901a..c55587b 100644
--- a/index.html
+++ b/index.html
@@ -22,19 +22,19 @@
 
     <!-- Nav tabs -->
     <ul class="nav nav-tabs" id="myTab" role="tablist">
-  <li class="nav-item" role="presentation">
-    <button class="nav-link" id="motors-tab" data-bs-toggle="tab" data-bs-target="#motors" type="button"
-      role="tab" aria-controls="motors" aria-selected="false">Motors</button>
-  </li>
-  <li class="nav-item" role="presentation">
-    <button class="nav-link active" id="animation-tab" data-bs-toggle="tab" data-bs-target="#animation" type="button"
-      role="tab" aria-controls="animation" aria-selected="true">Animation</button>
-  </li>
-  <li class="nav-item" role="presentation">
-    <button class="nav-link" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" type="button" role="tab"
-      aria-controls="about" aria-selected="false">About</button>
-  </li>
-</ul>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link" id="motors-tab" data-bs-toggle="tab" data-bs-target="#motors" type="button" role="tab"
+          aria-controls="motors" aria-selected="false">Motors</button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link active" id="animation-tab" data-bs-toggle="tab" data-bs-target="#animation"
+          type="button" role="tab" aria-controls="animation" aria-selected="true">Animation</button>
+      </li>
+      <li class="nav-item" role="presentation">
+        <button class="nav-link" id="about-tab" data-bs-toggle="tab" data-bs-target="#about" type="button" role="tab"
+          aria-controls="about" aria-selected="false">About</button>
+      </li>
+    </ul>
 
 
     <!-- Tab content -->
@@ -208,7 +208,8 @@
 
 
 
-        <canvas id="nodeeditor"></canvas>
+        <canvas id="nodeeditor" ></canvas>
+
         <div id="contextMenu" style="
   position: absolute;
   display: none;
diff --git a/nodeeditor/Control.js b/nodeeditor/Control.js
new file mode 100644
index 0000000..21c97ed
--- /dev/null
+++ b/nodeeditor/Control.js
@@ -0,0 +1,672 @@
+export class Control {
+  constructor(offsetX, offsetY, width, height, label = "", readOnly = false, hidden = false) {
+    this.offsetX = offsetX;
+    this.offsetY = offsetY;
+    this.width = width;
+    this.height = height;
+
+    this.label = label;
+    this.isHovered = false;
+    this.isFocused = false;
+
+    this.value = null;
+    this.onChange = null;
+    this.readOnly = readOnly;
+    this.hidden = hidden;
+
+    this.dragStartX = 0;
+    this.dragAccum = 0;
+    this.dragging = false;
+
+  }
+
+  getValue() {
+    return this.value;
+  }
+
+  draw(ctx, parentX, parentY) {
+    const x = parentX + this.offsetX;
+    const y = parentY + this.offsetY;
+
+    ctx.save();
+    ctx.fillStyle = this.isHovered ? "#eee" : "#f8f8f8";
+    ctx.strokeStyle = this.isFocused ? "#0af" : "#999";
+    ctx.lineWidth = 1;
+
+    ctx.beginPath();
+    ctx.roundRect(x, y, this.width, this.height, 6);
+    ctx.fill();
+    ctx.stroke();
+
+    this.drawLabel(ctx, x, y);
+
+    ctx.restore();
+  }
+
+  drawLate(ctx, parentX, parentY) {
+
+  }
+
+  drawLabel(ctx, x, y) {
+    ctx.fillStyle = "#333";
+    ctx.font = "12px sans-serif";
+    ctx.textAlign = "left";
+    ctx.textBaseline = "top";
+    ctx.fillText(this.label, x + 6, y + 6);
+  }
+
+  contains(mx, my, parentX, parentY) {
+    const x = parentX + this.offsetX;
+    const y = parentY + this.offsetY;
+    return mx > x && mx < x + this.width &&
+      my > y && my < y + this.height;
+  }
+
+  onEvent(type, data) {
+    if (this.readOnly) {
+      if (type === "mouseMove") {
+        return this.onMouseMove?.(data.mx, data.my, data.parentX, data.parentY, data.modifiers);
+      }
+      return;
+    }
+    switch (type) {
+      case "mouseDown": return this.onMouseDown?.(data.mx, data.my, data.parentX, data.parentY);
+      case "mouseUp": return this.onMouseUp?.(data.mx, data.my, data.parentX, data.parentY);
+      case "mouseMove": return this.onMouseMove?.(data.mx, data.my, data.parentX, data.parentY, data.modifiers);
+      case "keyDown": return this.onKeyDown?.(data.key);
+      case "scroll": return this.onScroll?.(data.delta);
+      case "clipboard": return this.onClipboard?.(data.event);
+      default:
+        console.warn(`Unhandled event type: ${type}`, data);
+
+    }
+  }
+
+
+  onMouseDown(mx, my, parentX, parentY) {
+    const x = parentX + this.offsetX;
+    const y = parentY + this.offsetY;
+
+    if (mx > x && mx < x + this.width &&
+      my > y && my < y + this.height) {
+      this.onClick(); // delegate to subclass
+      return true;
+    }
+    return false;
+  }
+
+
+  onMouseUp(mx, my, parentX, parentY) {
+    const x = parentX + this.offsetX;
+    const y = parentY + this.offsetY;
+
+    const inside = mx > x && mx < x + this.width &&
+      my > y && my < y + this.height;
+
+    this.dragging = false;
+
+    if (!inside) {
+      this.onBlur();
+    }
+  }
+
+
+  onMouseMove(mx, my, parentX, parentY, modifiers = {}) {
+    if (!this.dragging) return;
+
+    const deltaX = mx - this.dragStartX;
+    this.dragStartX = mx;
+    this.dragAccum += deltaX;
+
+    this.onDragDelta?.(deltaX, modifiers);
+  }
+
+
+  onScroll(delta) {
+    const step = 1;
+    this.value = Math.max(this.min, Math.min(this.max, this.value + delta * step));
+    if (this.onChange) this.onChange(this.value);
+  }
+
+
+  onHover(state) {
+    this.isHovered = state;
+  }
+
+  onFocus(state) {
+    this.isFocused = state;
+  }
+
+  onClick() {
+    this.onFocus(true);
+  }
+
+  onBlur() {
+    this.onFocus(false);
+  }
+
+  onClipboard(e) {
+    // Default: do nothing
+  }
+
+}
+
+export class SliderControl extends Control {
+  constructor(x, y, width, height, label = "", min = 0, max = 100, initial = 50, readOnly = false) {
+    super(x, y, width, height, label, readOnly);
+    this.min = min;
+    this.max = max;
+    this.value = initial;
+  }
+
+  getValue() {
+    return this.value;
+  }
+
+  draw(ctx, parentX, parentY) {
+    const x = parentX + this.offsetX;
+    const y = parentY + this.offsetY;
+
+    // Draw background and border
+    ctx.save();
+    ctx.fillStyle = this.isHovered ? "#eee" : "#f8f8f8";
+    ctx.strokeStyle = this.isFocused ? "#0af" : "#999";
+    ctx.lineWidth = 1;
+
+    ctx.beginPath();
+    ctx.roundRect(x, y, this.width, this.height, 6);
+    ctx.fill();
+    ctx.stroke();
+
+    this.drawLabel(ctx, x, y);
+
+    // Draw value (top-right)
+    ctx.textAlign = "right";
+    ctx.fillText(this.value.toFixed(0), x + this.width - 6, y + 6);
+
+    // Draw slider track
+    const padding = 10;
+    const trackY = y + this.height - 14; // lower in control
+    const trackStart = x + padding;
+    const trackEnd = x + this.width - padding;
+    const trackWidth = trackEnd - trackStart;
+
+    const percent = (this.value - this.min) / (this.max - this.min);
+    const knobX = trackStart + percent * trackWidth;
+
+    ctx.strokeStyle = "#aaa";
+    ctx.lineWidth = 2;
+    ctx.beginPath();
+    ctx.moveTo(trackStart, trackY);
+    ctx.lineTo(trackEnd, trackY);
+    ctx.stroke();
+
+    // Draw knob
+    ctx.fillStyle = this.isFocused ? "#0af" : "#666";
+    ctx.beginPath();
+    ctx.arc(knobX, trackY, 6, 0, Math.PI * 2);
+    ctx.fill();
+
+    ctx.restore();
+  }
+
+
+
+  onMouseDown(mx, my, parentX, parentY) {
+    const handled = super.onMouseDown(mx, my, parentX, parentY);
+    if (handled) {
+      this.dragging = true;
+      this.dragStartX = mx;
+      this.dragAccum = 0;
+      return true;
+    }
+    return false;
+  }
+
+
+  onMouseUp(mx, my, parentX, parentY) {
+    this.dragging = false;
+    this.onBlur();
+  }
+
+  onScroll(delta) {
+    super.onScroll?.(delta); // optional chaining in case base is extended later
+  }
+
+  onDragDelta(accumulatedDelta, modifiers = {}) {
+    const trackWidth = this.width - 20;
+    const valuePerPixel = (this.max - this.min) / trackWidth;
+
+    const screenDelta = accumulatedDelta / (1 / modifiers.zoom || 1);
+    const sensitivity = modifiers.ctrl ? 0.015 : 1.0;
+
+    const deltaValue = screenDelta * valuePerPixel * sensitivity;
+
+    this.dragAccum += deltaValue;
+
+    if (Math.abs(this.dragAccum) >= 1) {
+      const change = Math.round(this.dragAccum);
+      this.value = Math.max(this.min, Math.min(this.max, this.value + change));
+      this.dragAccum -= change;
+      if (this.onChange) this.onChange(this.value);
+    }
+  }
+
+}
+
+
+export class TextInputControl extends Control {
+  constructor(x, y, width, height, inputType = "text", label = "", initial = "", readOnly = false) {
+    super(x, y, width, height, label, readOnly);
+    this.text = String(initial);
+    this.cursorVisible = false;
+    this.cursorTimer = 0;
+
+    this.selecting = false;
+    this.selectionStart = 0;
+    this.selectionEnd = 0;
+    this.cursorIndex = this.text.length;
+
+    this.inputType = inputType;//"float"; // "text", "int", "float", "password"
+    this.allowNegative = true;
+    this.maxLength = 20;
+    this.regex = /^[a-zA-Z0-9]+$/
+
+  }
+
+  getValue() {
+    return this.text;
+  }
+
+  draw(ctx, parentX, parentY) {
+    const x = parentX + this.offsetX;
+    const y = parentY + this.offsetY;
+
+    ctx.save();
+    ctx.fillStyle = this.isHovered ? "#eee" : "#fff";
+    ctx.strokeStyle = this.isFocused ? "#0af" : "#999";
+    ctx.lineWidth = 1;
+
+    ctx.beginPath();
+    ctx.roundRect(x, y, this.width, this.height, 6);
+    ctx.fill();
+    ctx.stroke();
+
+    this.drawLabel(ctx, x, y);
+
+    const textBefore = this.text.slice(0, this.selectionStart);
+    const selectedText = this.text.slice(this.selectionStart, this.selectionEnd);
+
+    const textWidthBefore = ctx.measureText(textBefore).width;
+    const selectedWidth = ctx.measureText(selectedText).width;
+
+    if (this.selectionStart !== this.selectionEnd) {
+      ctx.fillStyle = "#cce5ff";
+      ctx.fillRect(x + 6 + textWidthBefore, textY - 10, selectedWidth, 20);
+    }
+
+
+    // Text field
+    ctx.font = "13px monospace";
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = "#000";
+    ctx.textAlign = "left";
+    const textY = y + this.height / 2 + 4;
+    const displayText = this.inputType === "password"
+      ? "*".repeat(this.text.length)
+      : this.text;
+    ctx.fillText(displayText, x + 6, textY);
+
+
+    // Blinking cursor
+    if (this.isFocused && this.cursorVisible) {
+      const textWidth = ctx.measureText(this.text).width;
+      const cursorX = x + 6 + ctx.measureText(this.text.slice(0, this.cursorIndex)).width;
+      ctx.beginPath();
+      ctx.moveTo(cursorX, textY - 8);
+      ctx.lineTo(cursorX, textY + 8);
+      ctx.strokeStyle = "#0af";
+      ctx.stroke();
+
+    }
+
+    ctx.restore();
+  }
+
+  onClick() {
+    super.onClick();
+    this.cursorVisible = true;
+    this.cursorTimer = 0;
+  }
+
+  onScroll(delta) {
+    const current = parseFloat(this.text) || 0;
+    const step = this.inputType === "int" ? 1 : 0.1;
+    const next = current + delta * step;
+
+    // Clamp if min/max are defined
+    const clamped = Math.max(this.min ?? -Infinity, Math.min(this.max ?? Infinity, next));
+
+    // Round to avoid floating point artifacts
+    const precision = step < 1 ? 2 : 0;
+    const factor = Math.pow(10, precision);
+    const rounded = Math.round(clamped * factor) / factor;
+
+    this.text = String(rounded);
+    this.cursorIndex = this.text.length;
+    this.selectionStart = this.selectionEnd = this.cursorIndex;
+
+    if (this.onChange) this.onChange(this.getValue());
+  }
+
+
+
+
+  onKeyDown(key) {
+    if (!this.isFocused) return;
+
+    const hasShift = window.event?.shiftKey;
+
+    if (key === "ArrowLeft") {
+      if (hasShift) {
+        this.cursorIndex = Math.max(0, this.cursorIndex - 1);
+        this.selectionEnd = this.cursorIndex;
+      } else {
+        this.cursorIndex = Math.max(0, this.cursorIndex - 1);
+        this.selectionStart = this.selectionEnd = this.cursorIndex;
+      }
+    } else if (key === "ArrowRight") {
+      if (hasShift) {
+        this.cursorIndex = Math.min(this.text.length, this.cursorIndex + 1);
+        this.selectionEnd = this.cursorIndex;
+      } else {
+        this.cursorIndex = Math.min(this.text.length, this.cursorIndex + 1);
+        this.selectionStart = this.selectionEnd = this.cursorIndex;
+      }
+
+    } else if (key === "Backspace") {
+      if (this.selectionStart !== this.selectionEnd) {
+        this.text = this.text.slice(0, this.selectionStart) + this.text.slice(this.selectionEnd);
+        this.cursorIndex = this.selectionStart;
+      } else if (this.cursorIndex > 0) {
+        this.text = this.text.slice(0, this.cursorIndex - 1) + this.text.slice(this.cursorIndex);
+        this.cursorIndex--;
+      }
+      this.selectionStart = this.selectionEnd = this.cursorIndex;
+    } else if (key === "Delete") {
+      if (this.selectionStart !== this.selectionEnd) {
+        this.text = this.text.slice(0, this.selectionStart) + this.text.slice(this.selectionEnd);
+        this.cursorIndex = this.selectionStart;
+      } else if (this.cursorIndex < this.text.length) {
+        this.text = this.text.slice(0, this.cursorIndex) + this.text.slice(this.cursorIndex + 1);
+      }
+      this.selectionStart = this.selectionEnd = this.cursorIndex;
+
+
+
+    } else if (key.length === 1) {
+      const preview = this.text.slice(0, this.selectionStart) + key + this.text.slice(this.selectionEnd);
+      if (!this.isValidInput(preview)) return;
+
+      if (this.selectionStart !== this.selectionEnd) {
+        this.text = this.text.slice(0, this.selectionStart) + key + this.text.slice(this.selectionEnd);
+        this.cursorIndex = this.selectionStart + 1;
+      } else {
+        this.text = this.text.slice(0, this.cursorIndex) + key + this.text.slice(this.cursorIndex);
+        this.cursorIndex++;
+      }
+
+      this.selectionStart = this.selectionEnd = this.cursorIndex;
+    }
+
+
+
+    if (this.onChange) this.onChange(this.text);
+  }
+
+  onClipboard(e) {
+    if (e.ctrlKey && e.key === "c") {
+      const selected = this.text.slice(this.selectionStart, this.selectionEnd);
+      navigator.clipboard.writeText(selected);
+      e.preventDefault();
+    }
+
+    if (e.ctrlKey && e.key === "v") {
+      navigator.clipboard.readText().then((clip) => {
+        let filtered = clip;
+
+        const preview = this.text.slice(0, this.selectionStart) + clip + this.text.slice(this.selectionEnd);
+        if (!this.isValidInput(preview)) return;
+
+
+
+        const before = this.text.slice(0, this.selectionStart);
+        const after = this.text.slice(this.selectionEnd);
+        this.text = before + filtered + after;
+        this.cursorIndex = before.length + filtered.length;
+        this.selectionStart = this.selectionEnd = this.cursorIndex;
+        if (this.onChange) this.onChange(this.text);
+      });
+
+      e.preventDefault();
+    }
+  }
+
+  isValidInput(input, strict = false) {
+    // Allow empty input
+    if (input === "") return true;
+
+    if (this.inputType === "int") {
+      if (!strict) {
+        // Allow "-" while typing
+        if (input === "-" && this.allowNegative) return true;
+      }
+      const intPattern = this.allowNegative ? /^-?\d+$/ : /^\d+$/;
+      return intPattern.test(input);
+    }
+
+    if (this.inputType === "float") {
+      if (!strict) {
+        // Relaxed pattern for typing
+        const relaxedPattern = this.allowNegative
+          ? /^-?(\d+)?(\.)?(\d*)?$/
+          : /^(\d+)?(\.)?(\d*)?$/;
+        return relaxedPattern.test(input);
+      }
+
+      // Auto-correct ".123" → "0.123", "-.123" → "-0.123"
+      if (/^\.\d+$/.test(input)) {
+        this.text = "0" + input;
+      } else if (/^-\.\d+$/.test(input)) {
+        input = "-0" + input.slice(1);
+        console.log(">");
+      }
+
+      // Strict pattern for finalized float
+      const strictPattern = this.allowNegative
+        ? /^-?\d+(\.\d+)?$/
+        : /^\d+(\.\d+)?$/;
+
+      return strictPattern.test(input);
+    }
+
+
+    // Regex check (applies to all types)
+    if (this.regex && !this.regex.test(input)) return false;
+
+    // Max length
+    const currentLength = this.text.length - (this.selectionEnd - this.selectionStart);
+    if (input.length + currentLength > this.maxLength) return false;
+
+    return true;
+  }
+
+
+
+  onBlur() {
+    super.onBlur();
+    if (!this.isValidInput(this.text, true)) {
+      // Optionally reset or trim invalid input
+      // this.text = "";
+      // this.cursorIndex = 0;
+      // this.selectionStart = this.selectionEnd = 0;
+      if (this.onChange) this.onChange(this.text);
+    }
+  }
+
+
+
+
+  update(deltaTime) {
+    if (this.isFocused) {
+      this.cursorTimer += deltaTime;
+      if (this.cursorTimer > 500) {
+        this.cursorVisible = !this.cursorVisible;
+        this.cursorTimer = 0;
+      }
+    }
+  }
+}
+
+export class DropdownControl extends Control {
+  constructor(x, y, width, height, label = "", options = [], initial = "", readOnly = false) {
+    super(x, y, width, height, label, readOnly);
+    this.options = options;
+    if (typeof initial === "number" && initial >= 0 && initial < options.length) {
+      this.value = options[initial];
+    } else if (typeof initial === "string" && options.includes(initial)) {
+      this.value = initial;
+    } else {
+      this.value = options.length > 0 ? options[0] : "";
+    }
+
+    this.isOpen = false;
+    this.hoveredIndex = -1;
+
+  }
+
+  getValue() {
+    return this.options.indexOf(this.value);
+    //return this.value; // returns string vlue
+  }
+
+  draw(ctx, parentX, parentY) {
+    const x = parentX + this.offsetX;
+    const y = parentY + this.offsetY;
+
+    ctx.save();
+    ctx.fillStyle = this.isHovered ? "#eee" : "#f8f8f8";
+    ctx.strokeStyle = this.isFocused ? "#0af" : "#999";
+    ctx.lineWidth = 1;
+
+    ctx.beginPath();
+    ctx.roundRect(x, y, this.width, this.height, 6);
+    ctx.fill();
+    ctx.stroke();
+
+    this.drawLabel(ctx, x, y);
+
+    // Draw selected value
+    ctx.fillStyle = "#000";
+    ctx.font = "13px sans-serif";
+    ctx.textAlign = "right";
+    ctx.textBaseline = "middle";
+    ctx.fillText(this.value, x + this.width - 20, y + this.height / 2);
+
+    // Draw dropdown arrow
+    ctx.beginPath();
+    ctx.moveTo(x + this.width - 16, y + this.height / 2 - 4);
+    ctx.lineTo(x + this.width - 10, y + this.height / 2 - 4);
+    ctx.lineTo(x + this.width - 13, y + this.height / 2 + 2);
+    ctx.closePath();
+    ctx.fillStyle = "#666";
+    ctx.fill();
+
+
+
+    ctx.restore();
+
+  }
+
+  drawLate(ctx, parentX, parentY) {
+    const x = parentX + this.offsetX;
+    const y = parentY + this.offsetY;
+    // Draw options if open
+    if (this.isOpen) {
+      for (let i = 0; i < this.options.length; i++) {
+        const optY = y + this.height + i * this.height;
+        const isHovered = i === this.hoveredIndex;
+
+        ctx.fillStyle = isHovered ? "#cce5ff" : (this.options[i] === this.value ? "#ddd" : "#fff");
+        ctx.strokeStyle = "#999";
+        ctx.beginPath();
+        ctx.rect(x, optY, this.width, this.height);
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.fillStyle = "#000";
+        ctx.textAlign = "left";
+        ctx.fillText(this.options[i], x + 6, optY + this.height / 2);
+      }
+    }
+  }
+
+  onClick() {
+    super.onClick();
+    this.isOpen = !this.isOpen;
+  }
+
+  onMouseDown(mx, my, parentX, parentY) {
+    const x = parentX + this.offsetX;
+    const y = parentY + this.offsetY;
+
+    if (this.isOpen) {
+      for (let i = 0; i < this.options.length; i++) {
+        const optY = y + this.height + i * this.height;
+        if (mx > x && mx < x + this.width && my > optY && my < optY + this.height) {
+          this.value = this.options[i];
+          this.isOpen = false;
+          if (this.onChange) this.onChange(this.value);
+          return true;
+        }
+      }
+    }
+    return super.onMouseDown(mx, my, parentX, parentY);
+  }
+
+  onMouseMove(mx, my, parentX, parentY) {
+    if (!this.isOpen) {
+      this.hoveredIndex = -1;
+      return;
+    }
+
+    const x = parentX + this.offsetX;
+    const y = parentY + this.offsetY;
+
+    this.hoveredIndex = -1;
+
+    for (let i = 0; i < this.options.length; i++) {
+      const optY = y + this.height + i * this.height;
+      if (mx > x && mx < x + this.width && my > optY && my < optY + this.height) {
+        this.hoveredIndex = i;
+        break;
+      }
+    }
+  }
+
+  onScroll(delta) {
+    delta = -delta;
+    const currentIndex = this.options.indexOf(this.value);
+    if (currentIndex === -1 || this.options.length === 0) return;
+
+    const nextIndex = Math.max(0, Math.min(this.options.length - 1, currentIndex + delta));
+    this.value = this.options[nextIndex];
+
+    if (this.onChange) this.onChange(this.getValue());
+  }
+
+  onBlur() {
+    super.onBlur();
+    this.isOpen = false;
+  }
+}
diff --git a/nodeeditor/Node.js b/nodeeditor/Node.js
new file mode 100644
index 0000000..d907f8c
--- /dev/null
+++ b/nodeeditor/Node.js
@@ -0,0 +1,404 @@
+import { SliderControl, TextInputControl, DropdownControl } from './Control.js';
+
+export class Node {
+    constructor(x, y) {
+        this.x = x;
+        this.y = y;
+        this.width = 180;
+
+        this.headerHeight = 6;
+        this.padding = 12;
+
+        this.isHovered = false;
+        this.isSelected = false;
+        this.isDragging = false;
+
+        this.offsetX = 0;
+        this.offsetY = 0;
+
+        this.hasInput = true;
+        this.hasOutput = true;
+        this.input = { x: 0, y: 0 };
+        this.output = { x: 0, y: 0 };
+        this.hoveredPort = null; // "input", "output", or null
+        this.canDelete = true;
+
+        this.controls = []
+        this.addControl(new SliderControl(this.padding, 0, this.width - this.padding * 2, 38, "Volume", 0, 4095, 1));
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "text", "Text", ""));
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "float", "Float", ""));
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "int", "int", ""));
+        this.addControl(new DropdownControl(this.padding, 0, this.width - this.padding * 2, 38, "Mode", ["Auto", "Manual", "Disabled"], "Auto"));
+
+    }
+
+    get height() {
+        if (this.controls.length === 0) {
+            return this.headerHeight + this.padding * 2;
+        }
+
+        const bottom = Math.max(
+            ...this.controls
+                .filter(c => !c.hidden)
+                .map(c => c.offsetY + c.height)
+        );
+
+        return bottom + this.padding;
+    }
+
+    updatePorts() {
+        this.input.x = this.x - 5;
+        this.input.y = this.y + this.height / 2;
+        this.output.x = this.x + this.width + 5;
+        this.output.y = this.y + this.height / 2;
+    }
+
+
+    draw(ctx) {
+        const radius = 8;
+
+        ctx.fillStyle = "#444";
+        ctx.strokeStyle = "#aaa";
+        ctx.lineWidth = 1;
+        const inset = ctx.lineWidth / 2;
+
+        if (this.isHovered) ctx.fillStyle = "#555";
+        if (this.isSelected) ctx.strokeStyle = "#0af";
+        if (this.isDragging) ctx.fillStyle = "#666";
+
+
+        ctx.beginPath();
+        ctx.roundRect(this.x + inset, this.y + inset, this.width - ctx.lineWidth, this.height - ctx.lineWidth, radius);
+        ctx.fill();
+        ctx.stroke();
+
+        // Draw header label
+        //this.drawLabel(ctx, "Node");
+
+        // Draw controls
+        for (const control of this.controls) {
+            if (!control.hidden) {
+                control.draw(ctx, this.x, this.y);
+            }
+        }
+        for (const control of this.controls) {
+            if (!control.hidden) {
+                control.drawLate(ctx, this.x, this.y);
+            }
+        }
+
+
+        this.updatePorts();
+
+        if (this.hasInput) {
+            ctx.beginPath();
+            const r = this.hoveredPort === "input" ? 8 : 6;
+            ctx.arc(this.input.x, this.input.y, r, 0, Math.PI * 2);
+            ctx.fillStyle = "#888";
+            ctx.fill();
+        }
+
+        if (this.hasOutput) {
+            ctx.beginPath();
+            const r = this.hoveredPort === "output" ? 8 : 6;
+            ctx.arc(this.output.x, this.output.y, r, 0, Math.PI * 2);
+            ctx.fillStyle = "#888";
+            ctx.fill();
+        }
+    }
+
+    drawLabel(ctx, label) {
+        ctx.fillStyle = "#fff";
+        ctx.font = "13px sans-serif";
+        ctx.textBaseline = "middle";
+        ctx.fillText(label, this.x + this.padding, this.y + 16);
+    }
+
+
+    contains(mx, my) {
+        return mx > this.x && mx < this.x + this.width &&
+            my > this.y && my < this.y + this.height;
+    }
+
+    onHover(state) {
+        this.isHovered = state;
+    }
+
+    onSelect(state) {
+        this.isSelected = state;
+    }
+
+    onDrag(state) {
+        this.isDragging = state;
+    }
+
+    onMouseMove(mx, my) {
+        // Check if mouse is near input or output
+        this.hoveredPort = null;
+
+        if (this.hasInput) {
+            const dx = mx - this.input.x;
+            const dy = my - this.input.y;
+            if (dx * dx + dy * dy < 64) {
+                this.hoveredPort = "input";
+                return;
+            }
+        }
+
+        if (this.hasOutput) {
+            const dx = mx - this.output.x;
+            const dy = my - this.output.y;
+            if (dx * dx + dy * dy < 64) {
+                this.hoveredPort = "output";
+            }
+        }
+    }
+
+
+
+    addControl(control) {
+        const lastBottom = this.controls.length > 0
+            ? Math.max(...this.controls.filter(c => !c.hidden).map(c => c.offsetY + c.height))
+            : this.headerHeight + this.padding;
+
+        control.offsetY = lastBottom + this.padding;
+        this.controls.push(control);
+    }
+}
+
+export class ServoNode extends Node {
+    constructor(x, y, motorID) {
+        super(x, y);
+
+        this.hasInput = true;
+        this.hasOutput = false;
+        this.canDelete = false;
+        this.controls = [];
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "int", "ID", motorID, true));
+    }
+
+    draw(ctx) {
+        super.draw(ctx);
+        super.drawLabel(ctx, "Servo Output");
+    }
+}
+
+export class CurveNode extends Node {
+    constructor(x, y, motorID) {
+        super(x, y);
+
+        this.hasInput = false;
+        this.hasOutput = true;
+        this.canDelete = false;
+        this.controls = [];
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "int", "ID", motorID, true));
+    }
+
+    draw(ctx) {
+        super.draw(ctx);
+        super.drawLabel(ctx, "Animation Curve");
+    }
+}
+
+export class VariableNode extends Node {
+    constructor(x, y) {
+        super(x, y);
+
+        this.hasInput = false;
+        this.hasOutput = true;
+        this.controls = [];
+        this.addControl(new DropdownControl(this.padding, 0, this.width - this.padding * 2, 38, "Variable", ["faceDetectX", "faceDetectY", "sine", "analogRead()", "servo"], "faceDetectX"));
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "int", "arg", 0, false));
+
+    }
+
+    draw(ctx) {
+        super.draw(ctx);
+        super.drawLabel(ctx, "Variable Source");
+
+        if (this.controls[0].getValue() == 3 || this.controls[0].getValue() == 4) {
+            this.controls[1].hidden = false;
+        } else {
+            this.controls[1].hidden = true;
+        }
+    }
+}
+
+export class MathNode extends Node {
+    constructor(x, y) {
+        super(x, y);
+
+        this.hasInput = true;
+        this.hasOutput = true;
+        this.controls = [];
+        this.addControl(new DropdownControl(this.padding, 0, this.width - this.padding * 2, 38, "Operator", ["*", "/", "+", "-"], "*"));
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "float", "arg", 0, false));
+
+    }
+
+    draw(ctx) {
+        super.draw(ctx);
+        super.drawLabel(ctx, "Math Operator");
+    }
+}
+
+export class MapNode extends Node {
+    constructor(x, y) {
+        super(x, y);
+
+        this.hasInput = true;
+        this.hasOutput = true;
+        this.controls = [];
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "float", "Input Min", 0, false));
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "float", "Input Max", 0, false));
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "float", "Output Min", 0, false));
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "float", "Output Max", 0, false));
+
+    }
+
+    draw(ctx) {
+        super.draw(ctx);
+        super.drawLabel(ctx, "Map Value");
+    }
+}
+
+
+export class NoiseNode extends Node {
+    constructor(x, y) {
+        super(x, y);
+
+        this.hasInput = false;
+        this.hasOutput = true;
+        this.controls = [];
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "float", "Frequency", 0.5, false));
+        this.addControl(new TextInputControl(this.padding, 0, this.width - this.padding * 2, 38, "int", "Seed", 0, false));
+
+
+    }
+
+    get height() {
+        const baseHeight = super.height;
+        const previewHeight = 60;
+        return baseHeight + previewHeight + this.padding * 2;
+    }
+
+
+
+    draw(ctx) {
+        super.draw(ctx);
+        super.drawLabel(ctx, "Noise");
+
+        const freq = Math.max(0.01, parseFloat(this.controls[0].getValue()) || 0);
+        const seed = parseFloat(this.controls[1].getValue()) || 0;
+
+        const steps = 256;
+        const previewHeight = 60;
+        const previewWidth = this.width - this.padding * 2;
+        const startX = this.x + this.padding;
+        const startY = this.y + this.height - previewHeight - this.padding;
+
+        ctx.fillStyle = "#f0f0f0"; // light gray background
+        ctx.strokeStyle = "#ccc";  // optional border
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.roundRect(
+            startX - this.padding / 2,
+            startY - this.padding / 2,
+            previewWidth + this.padding,
+            previewHeight + this.padding,
+            6
+        );
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.beginPath();
+        for (let i = 0; i < steps; i++) {
+            const t = i / steps * freq * 10;
+            const noise = perlin1D_octave(seed, t);
+            const x = startX + (i / steps) * previewWidth;
+            const y = startY + previewHeight / 2 - noise * (previewHeight / 2);
+            i === 0 ? ctx.moveTo(x, y) : ctx.lineTo(x, y);
+        }
+        ctx.strokeStyle = "#444";
+        ctx.stroke();
+    }
+}
+
+
+
+
+const fade = t => t * t * t * (t * (t * 6 - 15) + 10);
+const lerp = (a, b, t) => a + t * (b - a);
+
+function grad(hash, x) {
+    const h = hash & 15;
+    let grad = 1 + (h & 7); // 1 to 8
+    if (h & 8) grad = -grad;
+    return (grad * x) / 4;
+    //return (hash & 1 ? -1 : 1) * x;
+}
+
+
+const perlinCache = new Map();
+
+function perlin1D_octave(seed, x, octaves = 2, persistence = 0.5) {
+    let total = 0;
+    let amplitude = 1;
+    let frequency = 1;
+    let maxValue = 0;
+
+    for (let i = 0; i < octaves; i++) {
+        total += perlin1D(seed, x * frequency) * amplitude;
+        maxValue += amplitude;
+        amplitude *= persistence;
+        frequency *= 2;
+    }
+
+    return total / maxValue;
+}
+
+function perlin1D(seed, x) {
+    let seedCache = perlinCache.get(seed);
+    if (!seedCache) {
+        seedCache = new Map();
+        perlinCache.set(seed, seedCache);
+    }
+
+    const key = Math.round(x * 1000) / 1000;  // round to reduce precision noise
+    if (seedCache.has(key)) {
+        return seedCache.get(key);
+    }
+
+    const perm = generatePermutation(seed);
+    const xi = Math.floor(x) & 255;
+    const xf = x - Math.floor(x);
+    const u = fade(xf);
+
+    const a = perm[xi];
+    const b = perm[xi + 1];
+
+    const result = lerp(grad(a, xf), grad(b, xf - 1), u);
+    seedCache.set(key, result);
+    return result;
+}
+
+function generatePermutation(seed) {
+    const perm = new Array(512);
+    const p = new Array(256);
+    let s = seed;
+    for (let i = 0; i < 256; i++) {
+        s = (s * 1664525 + 1013904223) % 4294967296;
+        p[i] = i;
+    }
+    for (let i = 255; i > 0; i--) {
+        const j = s % (i + 1);
+        [p[i], p[j]] = [p[j], p[i]];
+        s = (s * 1664525 + 1013904223) % 4294967296;
+    }
+    for (let i = 0; i < 512; i++) {
+        perm[i] = p[i & 255];
+    }
+    return perm;
+}
+
+
diff --git a/nodeeditor/NodeEditor.js b/nodeeditor/NodeEditor.js
index 9a52206..bc9c362 100644
--- a/nodeeditor/NodeEditor.js
+++ b/nodeeditor/NodeEditor.js
@@ -1,620 +1,667 @@
+import { Node, ServoNode, VariableNode, CurveNode, MathNode, MapNode, NoiseNode } from './Node.js';
+import { TextInputControl } from './Control.js';
+import { encodeNodeGraph, loadFromBinary } from './NodeSerializer.js';
 
-import { ServoNode, CurveNode, VariableNode, NoiseNode, MathNode, MapNode, NODE_TYPES } from "./nodes.js"
+// === Grid Settings ===
+const GRID_SPACING = 20;         // Distance between dots in pixels
+const CANVAS_COLOR = "#ffffffff";
+const GRID_COLOR = "#ff0000ff";    // Dot color
+const GRID_RADIUS = 1;         // Dot radius in pixels
 
 
 export class NodeEditor {
-    constructor(canvas, options = {}) {
-        this.canvas = canvas;
-        canvas.width = canvas.offsetWidth;
-        canvas.height = canvas.offsetHeight;
-        this.ctx = canvas.getContext("2d");
-        this.nodes = [];
-        this.connections = [];
-        this.draggingNode = null;
-        this.draggingWire = null;
-        this.motorIds = options.motorIds || []; // pass motor ID list here
+  constructor(canvas) {
+    this.canvas = canvas;
+    canvas.width = canvas.offsetWidth;
+    canvas.height = canvas.offsetHeight;
+    this.ctx = canvas.getContext('2d');
+    this.nodes = [
+      //new Node(100, 100),
+      //new Node(300, 200),
+      // new CurveNode(600, 400, 22),
+      // new ServoNode(900, 400, 22),
+      // new VariableNode(300, 800),
+      // new MathNode(600, 800),
+      // new MapNode(900, 800),
+      // new NoiseNode(900, 1200),
+    ];
+    this.connections = []
+    this.draggingConnection = null; // { fromNode: Node, x: number, y: number }
+    this.hoveredConnection = null;
 
-        this.panX = 0;
-        this.panY = 0;
-        this.isPanning = false;
-        this.lastPan = { x: 0, y: 0 };
-        this.zoom = 1.0;
-        this.focusedInput = null;
+    //this.connections.push({ from: this.nodes[0], to: this.nodes[1] });
+    //this.connections.push({ from: this.nodes[2], to: this.nodes[3] });
 
 
-        this._bindEvents();
-        this._redraw();
-    }
+    this.draggingNode = null;
+    this.offsetX = 0; // pan X
+    this.offsetY = 0; // pan Y
+    this.zoom = 1;    // zoom scale
+    this.isPanning = false;
+    this.panStart = { x: 0, y: 0 };
 
-    generateDefaultNodes(curveSets, motorIDs) {
-        //console.log("Generating Default Nodes");
-        //console.log(curveSets, motorIDs);
-
-        for (var i = 0; i < motorIDs.length; i++) {
-            let inputNode = this.addCurveNode(200, 20 + i * 140, "Curve", motorIDs[i]);
-            let outputNode = this.addServoNode(500, 40 + i * 140, "Servo Output", motorIDs[i]);
-            this.connections.push({ from: inputNode, to: outputNode });
-        }
-
-        //this.addVariableNode(50, 120, "Var");
-    }
-
-    getNodeByID(id) {
-        return this.nodes.find(node => node.id === id) || null;
-    }
-
-    getAllInputs() {
-        let inputs = [];
-        for (var i = 0; i < this.nodes.length; i++) {
-            inputs.push(...this.nodes[i].inputs);
-        }
-        return inputs;
-    }
-
-    encodeNodeGraph() {
-        const bufferSize = 1024; // adjust based on expected graph size
-        const buffer = new ArrayBuffer(bufferSize);
-        const view = new DataView(buffer);
-        let offset = 0;
-
-        const nodes = this.nodes;
-
-        // Node count (1 byte)
-        view.setUint8(offset++, nodes.length);
-
-        // Encode nodes
-        nodes.forEach((node, index) => {
-            const typeCode = NODE_TYPES[node.type];
-            node.id = index;
-
-            view.setUint8(offset++, node.type); // Node type
-            view.setUint8(offset++, node.id);  // Node ID
-            view.setUint16(offset, node.x, true); offset += 2;
-            view.setUint16(offset, node.y, true); offset += 2;
+    this.canvas.addEventListener('mousedown', this.onMouseDown.bind(this));
+    this.canvas.addEventListener('mousemove', this.onMouseMove.bind(this));
+    this.canvas.addEventListener('mouseup', this.onMouseUp.bind(this));
+    this.canvas.addEventListener("dblclick", this.onDoubleClick.bind(this));
+    this.canvas.addEventListener('wheel', this.onWheel.bind(this), { passive: false });
+    this.canvas.addEventListener("contextmenu", this.onContextMenu.bind(this));
 
 
-            switch (node.type) {
-                case NODE_TYPES.Servo:
-                    view.setUint8(offset++, node.motorId);
-                    break;
 
-                case NODE_TYPES.Curve:
-                    view.setUint8(offset++, node.curveId);
-                    break;
+    this.modifiers = {
+      ctrl: false,
+      shift: false,
+      alt: false
+    };
 
-                case NODE_TYPES.Noise:
-                    view.setFloat32(offset, node.inputFrequency.numericValue, true); offset += 4;
-                    view.setUint16(offset, node.inputSeed.numericValue); offset += 2;
-                    break;
+    window.addEventListener("keydown", (e) => {
+      if (e.key === "Control") this.modifiers.ctrl = true;
+      if (e.key === "Shift") this.modifiers.shift = true;
+      if (e.key === "Alt") this.modifiers.alt = true;
 
+      for (const node of this.nodes) {
+        for (const control of node.controls) {
+          if (control.isFocused) {
+            let clipboardHandled = false;
 
-                case NODE_TYPES.Variable:
-                    view.setUint8(offset++, node.variableDropdown.selectedIndex);
-                    view.setUint8(offset++, node.arg0Input.numericValue);
-                    break;
-
-
-                case NODE_TYPES.Math:
-                    view.setUint8(offset++, node.operatorDropdown.selectedIndex);
-                    view.setFloat32(offset, node.valueInput.numericValue, true); offset += 4;
-                    break;
-
-                case NODE_TYPES.Map:
-                    view.setFloat32(offset, node.inMinInput.numericValue, true); offset += 4;
-                    view.setFloat32(offset, node.inMaxInput.numericValue, true); offset += 4;
-                    view.setFloat32(offset, node.outMinInput.numericValue, true); offset += 4;
-                    view.setFloat32(offset, node.outMaxInput.numericValue, true); offset += 4;
-                    console.log(node.inMinInput.numericValue, node.inMaxInput.numericValue, node.outMinInput.numericValue, node.outMaxInput.numericValue);
-                    break;
-
-                default:
-                    console.warn("Unknown node type:", node.type);
-            }
-        });
-
-        // Connection count (1 byte)
-        view.setUint8(offset++, this.connections.length);
-
-        // Encode connections
-        this.connections.forEach(conn => {
-            view.setUint8(offset++, conn.from.id);
-            view.setUint8(offset++, conn.to.id);
-        });
-
-        // Slice the buffer to actual used size
-        return new Uint8Array(buffer.slice(0, offset));
-    }
-
-    loadFromBinary(data) {
-        this.nodes = []
-        console.log(this.connections);
-        this.connections = []
-        const view = new DataView(data.buffer);
-        let offset = 0;
-
-        const nodeCount = view.getUint8(offset++);
-        const idMap = {}; // Map node IDs to actual node instances
-
-        for (let i = 0; i < nodeCount; i++) {
-            const type = view.getUint8(offset++);
-            const id = view.getUint8(offset++);
-            const x = view.getUint16(offset, true); offset += 2;
-            const y = view.getUint16(offset, true); offset += 2;
-
-            let node = null;
-
-            switch (type) {
-                case NODE_TYPES.Servo: {
-                    const motorID = view.getUint8(offset++);
-                    node = this.addServoNode(x, y, "Servo Output", motorID);
-                    break;
-                }
-                case NODE_TYPES.Curve: {
-                    const curveID = view.getUint8(offset++);
-                    node = this.addCurveNode(x, y, "Curve", curveID);
-                    break;
-                }
-                case NODE_TYPES.Noise: {
-                    const frequency = view.getFloat32(offset, true); offset += 4;
-                    const seed = view.getUint16(offset, true); offset += 2;
-                    node = this.addNoiseNode(x, y, "Noise");
-                    node.inputFrequency.value = frequency;
-                    node.inputSeed.value = seed;
-                    break;
-                }
-                case NODE_TYPES.Variable: {
-                    const source = view.getUint8(offset++);
-                    const arg0 = view.getUint8(offset++);
-                    node = this.addVariableNode(x, y, "Variable");
-                    node.variableDropdown.selectedIndex = source;
-                    node.arg0Input.value = arg0;
-                    break;
-                }
-                case NODE_TYPES.Math: {
-                    const op = view.getUint8(offset++);
-                    const value = view.getFloat32(offset, true); offset += 4;
-                    node = this.addMathNode(x, y, "Math");
-                    console.log(op, value);
-                    node.operatorDropdown.selectedIndex = op;
-                    node.valueInput.value = value;
-                    break;
-                }
-                case NODE_TYPES.Map: {
-                    const inMin = view.getFloat32(offset, true); offset += 4;
-                    const inMax = view.getFloat32(offset, true); offset += 4;
-                    const outMin = view.getFloat32(offset, true); offset += 4;
-                    const outMax = view.getFloat32(offset, true); offset += 4;
-                    node = this.addMapNode(x, y, "Map");
-                    node.inMinInput.value = inMin;
-                    node.inMaxInput.value = inMax;
-                    node.outMinInput.value = outMin;
-                    node.outMaxInput.value = outMax;
-                    break;
-                }
-                default: {
-                    node = this.addNode(x, y, "Unknown Node");
-                    break;
-                }
+            if (control.onClipboard) {
+              control.onClipboard(e);
+              clipboardHandled = e.defaultPrevented;
             }
 
-            if (node) {
-                node.id = id;
-                idMap[id] = node;
+            if (!clipboardHandled && control.onKeyDown) {
+              control.onKeyDown(e.key);
             }
-        }
 
-        console.log(this.getNodeByID(0));
-
-        // 🔗 Load connections
-        this.connection = [];
-        const connectionCount = view.getUint8(offset++);
-        for (let i = 0; i < connectionCount; i++) {
-            const fromID = view.getUint8(offset++);
-            const toID = view.getUint8(offset++);
-            const fromNode = idMap[fromID];
-            const toNode = idMap[toID];
-            if (fromNode && toNode) {
-                this.connections.push({ from: fromNode, to: toNode });
-            }
-        }
-
-
-        // Reencode all positions to SIGNED ints
-        this.nodes.forEach(node => {
-            node.x = (node.x << 16) >> 16;
-            node.y = (node.y << 16) >> 16;
-        });
-
-        this._redraw();
-    }
-
-
-
-    addNode(x, y, label, options = {}) {
-        const node = new Node(x, y, label, options);
-        this.nodes.push(node);
-        this._redraw();
-        return node;
-    }
-
-    addServoNode(x, y, label = "Servo Output", motorID) {
-        //console.log(motorID);
-        const node = new ServoNode(x, y, label, motorID);
-        this.nodes.push(node);
-        this._redraw();
-        return node;
-    }
-
-    addCurveNode(x, y, label = "Curve", motorID) {
-        //console.log(motorID);
-        const node = new CurveNode(x, y, label, motorID);
-        this.nodes.push(node);
-        this._redraw();
-        return node;
-    }
-
-    addInputNode(x, y, label = "Input Node", options = { defaultValue: 1.0 }) {
-        const node = new InputNode(x, y, label, options);
-        this.nodes.push(node);
-        this._redraw();
-        return node;
-    }
-
-    addNoiseNode(x, y, label = "Noise Generator", options = {}) {
-        const node = new NoiseNode(x, y, label, options);
-        this.nodes.push(node);
-        this._redraw();
-        return node;
-    }
-
-    addVariableNode(x, y, label = "Variable") {
-        const node = new VariableNode(x, y, label);
-        this.nodes.push(node);
-        this._redraw();
-        return node;
-    }
-
-    addMathNode(x, y, label = "Math") {
-        const node = new MathNode(x, y, label);
-        this.nodes.push(node);
-        this._redraw();
-        return node;
-    }
-
-    addMapNode(x, y, label = "Map") {
-        const node = new MapNode(x, y, label);
-        this.nodes.push(node);
-        this._redraw();
-        return node;
-    }
-
-
-
-
-    _bindEvents() {
-        this.canvas.addEventListener("mousedown", (e) => this._onMouseDown(e));
-        this.canvas.addEventListener("mousemove", (e) => this._onMouseMove(e));
-        this.canvas.addEventListener("mouseup", (e) => this._onMouseUp(e));
-        this.canvas.addEventListener("dblclick", (e) => this._onDoubleClick(e));
-        window.addEventListener("keydown", (e) => this._onKeyDown(e));
-        this.canvas.addEventListener("wheel", (e) => this._onWheel(e));
-
-        this.canvas.addEventListener("contextmenu", (e) => {
-            e.preventDefault();
-            const { x, y } = this._getMouse(e);  // canvas-space for node placement
-            this._showContextMenu(e.pageX, e.pageY, x, y);  // page-space for menu placement
-        });
-
-
-
-
-    }
-
-
-    _onMouseDown(e) {
-        const { x, y } = this._getMouse(e);
-
-        if (e.button === 1) {  // middle mouse
-            this.isPanning = true;
-            console.log("pan")
-            this.lastPan = this._getMouse(e);
             e.preventDefault();
             return;
+          }
         }
-
-        this.focusedInput = null;
-        let allInputs = this.getAllInputs();
-        for (const input of allInputs) {
-            if (input.handleClick(x, y)) {
-                this.focusedInput = input;
-            } else {
-                input.focused = false;
-            }
-        }
+      }
+    });
 
 
-        for (const node of this.nodes) {
-            if (node.contains(x, y)) {
-                if (node.handleClick(x, y)) {
-                    this._redraw();
-                    return;
-                }
 
-                this.draggingNode = node;
-                node.offsetX = x - node.x;
-                node.offsetY = y - node.y;
-                return;
-            }
 
-            if (node.hitOutput(x, y)) {
-                this.draggingWire = { x1: node.output.x, y1: node.output.y, x2: x, y2: y, from: node };
-                return;
-            }
-        }
+    window.addEventListener("keyup", (e) => {
+      if (e.key === "Control") this.modifiers.ctrl = false;
+      if (e.key === "Shift") this.modifiers.shift = false;
+      if (e.key === "Alt") this.modifiers.alt = false;
+    });
+
+
+    // let encoded = encodeNodeGraph(this.nodes, this.connections);
+    // console.log(encoded);
+    //loadFromBinary(this, encoded);
+    //this.createGridCanvas();
+  }
+
+  start() {
+    requestAnimationFrame(this.draw.bind(this));
+  }
+
+  clear() {
+    this.nodes = [];
+    this.connections = [];
+
+  }
+
+  addNode(node) {
+    this.nodes.push(node);
+    this._redraw?.(); // or trigger draw manually
+  }
+
+
+  generateDefaultNodes(curveSets, motorIDs) {
+    //console.log("Generating Default Nodes");
+    //console.log(curveSets, motorIDs);
+
+    for (var i = 0; i < motorIDs.length; i++) {
+      let inputNode = new CurveNode(200, 20 + i * 140, motorIDs[i]);
+      let outputNode = new ServoNode(500, 40 + i * 140, motorIDs[i]);
+      this.nodes.push(inputNode);
+      this.nodes.push(outputNode);
+      this.connections.push({ from: inputNode, to: outputNode });
+      console.log(inputNode);
+    }
+    this.draw();
+    //this.addVariableNode(50, 120, "Var");
+  }
+
+  encodeNodeGraph() {
+    return encodeNodeGraph(this.nodes, this.connections);
+  }
+
+  loadFromBinary(data) {
+    console.log(data);
+    this.clear();
+    loadFromBinary(this, data);
+  }
+
+  draw() {
+    this.ctx.fillStyle = CANVAS_COLOR;
+    this.ctx.fillRect(0, 0, this.canvas.width, this.canvas.height);
+    //this.ctx.drawImage(this.gridCanvas, 0, 0);
+    this.drawGrid();
+    this.ctx.save();
+    this.ctx.translate(this.offsetX, this.offsetY);
+    this.ctx.scale(this.zoom, this.zoom);
+
+    this.drawConnections();
+
+    for (const node of this.nodes) {
+
+      node.draw(this.ctx);
     }
 
+    this.ctx.restore();
 
+    requestAnimationFrame(this.draw.bind(this));
+  }
 
+  drawConnections() {
+    this.ctx.strokeStyle = "#444";
+    this.ctx.lineWidth = 2;
+    for (const conn of this.connections) {
+      const x1 = conn.from.output.x;
+      const y1 = conn.from.output.y;
+      const x2 = conn.to.input.x;
+      const y2 = conn.to.input.y;
+      const dx = Math.abs(x2 - x1) * 0.5;
 
-    _onMouseMove(e) {
-        const { x, y } = this._getMouse(e);
+      this.ctx.beginPath();
+      this.ctx.moveTo(x1, y1);
+      this.ctx.bezierCurveTo(x1 + dx, y1, x2 - dx, y2, x2, y2);
 
-        let needsRedraw = false;
-
-        if (this.isPanning) {
-            const { x, y } = this._getMouse(e);
-            const { screenX, screenY } = this._getMouse(e);
-            this.panX += screenX - this.lastPan.screenX;
-            this.panY += screenY - this.lastPan.screenY;
-            this.lastPan = { screenX, screenY };
-
-            this._redraw();
-            //return;
-        }
-
-
-        // Required for highlighting dropdown options onMouseOver
-        for (const node of this.nodes) {
-            //if (node instanceof ServoNode || node instanceof VariableNode) {
-            if (node.handleMouseMove(x, y)) {
-                needsRedraw = true;
-            }
-            //}
-        }
-
-        if (needsRedraw) this._redraw();
-
-
-        if (this.draggingNode) {
-            this.draggingNode.x = x - this.draggingNode.offsetX;
-            this.draggingNode.y = y - this.draggingNode.offsetY;
-            this.draggingNode.updatePorts();
-            this._redraw();
-        }
-
-        if (this.draggingWire) {
-            this.draggingWire.x2 = x;
-            this.draggingWire.y2 = y;
-            this._redraw();
-        }
-    }
-
-
-    _onMouseUp(e) {
-        const { x, y } = this._getMouse(e);
-
-        if (this.isPanning) {
-            this.isPanning = false;
-        }
-
-
-        if (this.draggingWire) {
-            for (const node of this.nodes) {
-                if (node.hitInput(x, y)) {
-                    // Remove any existing connection to this input
-                    for (let i = this.connections.length - 1; i >= 0; i--) {
-                        if (this.connections[i].to === node) {
-                            this.connections.splice(i, 1);
-                        }
-                    }
-
-                    // Add new connection
-                    this.connections.push({ from: this.draggingWire.from, to: node });
-                    break;
-                }
-            }
-            this.draggingWire = null;
-            this._redraw();
-        }
-
-
-        this.draggingNode = null;
-    }
-
-    _onDoubleClick(e) {
-        const { x, y } = this._getMouse(e);
-
-        // First: check for wire deletion
-        for (let i = this.connections.length - 1; i >= 0; i--) {
-            const conn = this.connections[i];
-            if (this._isPointNearLine(x, y, conn.from.output.x, conn.from.output.y, conn.to.input.x, conn.to.input.y)) {
-                this.connections.splice(i, 1);
-                this._redraw();
-                return;
-            }
-        }
-
-        // Second: check for node deletion
-        for (let i = this.nodes.length - 1; i >= 0; i--) {
-            const node = this.nodes[i];
-            if (node.contains(x, y) && node.canDelete) {
-                // Remove connections to/from this node
-                this.connections = this.connections.filter(conn => conn.from !== node && conn.to !== node);
-                this.nodes.splice(i, 1);
-                this._redraw();
-                return;
-            }
-        }
-    }
-
-
-    _getMouse(e) {
-        const rect = this.canvas.getBoundingClientRect();
-        const screenX = e.clientX - rect.left;
-        const screenY = e.clientY - rect.top;
-
-        const canvasX = (screenX - this.panX) / this.zoom;
-        const canvasY = (screenY - this.panY) / this.zoom;
-
-        return {
-            x: canvasX,
-            y: canvasY,
-            screenX,
-            screenY
-        };
-    }
-
-
-    _onKeyDown(e) {
-        let needsRedraw = false;
-
-        for (const node of this.nodes) {
-            if (node.handleKey && node.handleKey(e)) {
-                needsRedraw = true;
-            }
-        }
-
-        if (needsRedraw) this._redraw();
-    }
-
-
-    _onWheel(e) {
-        const zoomFactor = 1.1;
-        if (e.deltaY < 0) {
-            this.zoom *= zoomFactor;
-        } else {
-            this.zoom /= zoomFactor;
-        }
-        this.zoom = Math.max(0.2, Math.min(3.0, this.zoom));  // clamp zoom
-        this._redraw();
-        e.preventDefault();
-    }
-
-
-
-    _isPointNearLine(px, py, x1, y1, x2, y2, threshold = 10) {
-        const dx = x2 - x1;
-        const dy = y2 - y1;
-        const lengthSquared = dx * dx + dy * dy;
-        if (lengthSquared === 0) return false;
-
-        const t = Math.max(0, Math.min(1, ((px - x1) * dx + (py - y1) * dy) / lengthSquared));
-        const closestX = x1 + t * dx;
-        const closestY = y1 + t * dy;
-        const dist = Math.hypot(px - closestX, py - closestY);
-        return dist < threshold;
-    }
-
-    _showContextMenu(screenX, screenY, canvasX, canvasY) {
-        const menu = document.getElementById("contextMenu");
-        menu.innerHTML = "";  // clear previous items
-        menu.style.left = `${screenX}px`;
-        menu.style.top = `${screenY}px`;
-        menu.style.display = "block";
-
-        const hideMenu = () => {
-            menu.style.display = "none";
-            window.removeEventListener("click", hideMenu);
-        };
-        window.addEventListener("click", hideMenu);
-
-        // ✅ Only include Variable node
-        let item = document.createElement("div");
-        item.className = "menu-item";
-        item.textContent = "➕ Add Variable Node";
-        item.onclick = () => {
-            this.addVariableNode(canvasX, canvasY, "Variable");
-            hideMenu();
-        };
-        menu.appendChild(item);
-
-        item = document.createElement("div");
-        item.className = "menu-item";
-        item.textContent = "➕ Add Math Node";
-        item.onclick = () => {
-            this.addMathNode(canvasX, canvasY, "Math");
-            hideMenu();
-        };
-        menu.appendChild(item);
-
-        item = document.createElement("div");
-        item.className = "menu-item";
-        item.textContent = "➕ Add Map Node";
-        item.onclick = () => {
-            this.addMapNode(canvasX, canvasY, "Map");
-            hideMenu();
-        };
-        menu.appendChild(item);
-
-        item = document.createElement("div");
-        item.className = "menu-item";
-        item.textContent = "➕ Add Noise Node";
-        item.onclick = () => {
-            this.addNoiseNode(canvasX, canvasY, "Noise");
-            hideMenu();
-        };
-        menu.appendChild(item);
-    }
-
-
-
-    _drawConnections() {
+      if (conn === this.hoveredConnection) {
+        this.ctx.strokeStyle = "#666"; // lighter on hover
+        this.ctx.lineWidth = 6.5;
+      } else {
         this.ctx.strokeStyle = "#444";
-        this.ctx.lineWidth = 2;
-        for (const conn of this.connections) {
-            const x1 = conn.from.output.x;
-            const y1 = conn.from.output.y;
-            const x2 = conn.to.input.x;
-            const y2 = conn.to.input.y;
+        this.ctx.lineWidth = 4;
+      }
 
-            const dx = Math.abs(x2 - x1) * 0.5;
-
-            this.ctx.beginPath();
-            this.ctx.moveTo(x1, y1);
-            this.ctx.bezierCurveTo(
-                x1 + dx, y1,
-                x2 - dx, y2,
-                x2, y2
-            );
-            this.ctx.stroke();
-
-        }
+      this.ctx.stroke();
     }
 
-    _redraw() {
-        this.ctx.save();
-        this.ctx.setTransform(1, 0, 0, 1, 0, 0);  // reset transform
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);  // clear full canvas
+    // Live dragging connection
+    if (this.draggingConnection) {
+      const x1 = this.draggingConnection.fromNode.output.x;
+      const y1 = this.draggingConnection.fromNode.output.y;
+      const x2 = this.draggingConnection.x;
+      const y2 = this.draggingConnection.y;
+      const dx = Math.abs(x2 - x1) * 0.5;
 
-        this.ctx.setTransform(this.zoom, 0, 0, this.zoom, this.panX, this.panY);
+      this.ctx.beginPath();
+      this.ctx.moveTo(x1, y1);
+      this.ctx.bezierCurveTo(x1 + dx, y1, x2 - dx, y2, x2, y2);
+      this.ctx.stroke();
+    }
+  }
+
+  createGridCanvas() {
+    const gridCanvas = document.createElement('canvas');
+    gridCanvas.width = this.canvas.width;
+    gridCanvas.height = this.canvas.height;
+    const ctx = gridCanvas.getContext('2d');
+    ctx.fillStyle = GRID_COLOR;
+
+    for (let x = 0; x < gridCanvas.width; x += GRID_SPACING) {
+      for (let y = 0; y < gridCanvas.height; y += GRID_SPACING) {
+        ctx.fillRect(x, y, 1, 1);
+      }
+    }
+
+    this.gridCanvas = gridCanvas;
+  }
+
+
+  drawGrid() {
+    const { width, height } = this.canvas;
+    const spacing = GRID_SPACING * this.zoom;
+    const radius = GRID_RADIUS * this.zoom;
+
+    // Skip grid rendering if spacing is too small
+    if (spacing < 2) return;
+
+    // Dynamically skip grid points when zoomed out
+    const skip = spacing < 8 ? Math.ceil(8 / spacing) : 1;
+
+    this.ctx.fillStyle = GRID_COLOR;
+    this.ctx.beginPath();
+
+    const startX = (this.offsetX % spacing + spacing) % spacing;
+    const startY = (this.offsetY % spacing + spacing) % spacing;
+
+    let i = 0;
+    for (let x = startX; x < width; x += spacing, i++) {
+      if (i % skip !== 0) continue;
+
+      let j = 0;
+      for (let y = startY; y < height; y += spacing, j++) {
+        if (j % skip !== 0) continue;
+
+        this.ctx.fillRect(x - radius / 2, y - radius / 2, radius, radius);
+
+      }
+    }
+
+    this.ctx.fill();
+  }
 
 
 
-        this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
-        this._drawConnections();
+
+
+  snapToGrid(x, y) {
+    const spacing = GRID_SPACING;
+    const snappedX = Math.round(x / spacing) * spacing;
+    const snappedY = Math.round(y / spacing) * spacing;
+    return { x: snappedX, y: snappedY };
+  }
+
+  screenToWorld(mx, my) {
+    const rect = this.canvas.getBoundingClientRect();
+    const x = (mx - rect.left - this.offsetX) / this.zoom;
+    const y = (my - rect.top - this.offsetY) / this.zoom;
+    return { x, y };
+  }
+
+
+  onMouseDown(e) {
+    if (e.button === 1) { // middle mouse
+      this.isPanning = true;
+      this.panStart.x = e.clientX;
+      this.panStart.y = e.clientY;
+      e.preventDefault();
+      return;
+    }
+
+    const { x: wx, y: wy } = this.screenToWorld(e.clientX, e.clientY);
+
+    for (const node of this.nodes) {
+      if (node.hasOutput) {
+        const { x, y } = node.output;
+        const radius = 8;
+        const dx = wx - x;
+        const dy = wy - y;
+        if (dx * dx + dy * dy < radius * radius) {
+          this.draggingConnection = {
+            fromNode: node,
+            x: wx,
+            y: wy
+          };
+          return;
+        }
+      }
+      for (const control of node.controls) {
+        control._ctx = this.ctx; // inject context if needed
+
+        const handled = control.onEvent?.("mouseDown", {
+          mx: wx,
+          my: wy,
+          parentX: node.x,
+          parentY: node.y
+        });
+
+        if (handled) return;
+      }
+    }
+
+    for (let i = this.nodes.length - 1; i >= 0; i--) {
+      const node = this.nodes[i];
+      if (node.contains(wx, wy)) {
+        node.onSelect(true);
+        node.onDrag(true);
+        node.offsetX = wx - node.x;
+        node.offsetY = wy - node.y;
+        this.draggingNode = node;
+
+        this.nodes.splice(i, 1);
+        this.nodes.push(node);
+        break;
+      }
+    }
+  }
+
+
+
+
+  onMouseMove(e) {
+    this.hoveredConnection = null;
+    if (this.isPanning) {
+      const dx = e.clientX - this.panStart.x;
+      const dy = e.clientY - this.panStart.y;
+      this.offsetX += dx;
+      this.offsetY += dy;
+      this.panStart.x = e.clientX;
+      this.panStart.y = e.clientY;
+      return;
+    }
+
+
+
+    const { x: wx, y: wy } = this.screenToWorld(e.clientX, e.clientY);
+
+    if (this.draggingConnection) {
+      this.draggingConnection.x = wx;
+      this.draggingConnection.y = wy;
+      return;
+    }
+
+    for (const conn of this.connections) {
+      const x1 = conn.from.output.x;
+      const y1 = conn.from.output.y;
+      const x2 = conn.to.input.x;
+      const y2 = conn.to.input.y;
+      const dx = Math.abs(x2 - x1) * 0.5;
+
+      for (let t = 0; t <= 1; t += 0.01) {
+        const px = this.bezierPoint(x1, x1 + dx, x2 - dx, x2, t);
+        const py = this.bezierPoint(y1, y1, y2, y2, t);
+        const dist = Math.hypot(wx - px, wy - py);
+        if (dist < 8) {
+          this.hoveredConnection = conn;
+          break;
+        }
+      }
+
+      if (this.hoveredConnection) break;
+    }
+
+    // First, check if any control is under the cursor
+    let controlHovered = false;
+
+    for (let i = this.nodes.length - 1; i >= 0; i--) {
+      const node = this.nodes[i];
+      for (const control of node.controls) {
+        control._ctx = this.ctx; // inject context if needed
+
+        if (control.contains?.(wx, wy, node.x, node.y)) {
+          controlHovered = true;
+        }
+
+        control.onEvent?.("mouseMove", {
+          mx: wx,
+          my: wy,
+          parentX: node.x,
+          parentY: node.y,
+          modifiers: { ...this.modifiers, zoom: this.zoom }
+        });
+      }
+
+      if (!this.draggingNode && !controlHovered) {
         for (const node of this.nodes) {
-            node.draw(this.ctx);
+          node.onMouseMove(wx, wy);
         }
+      }
 
-        if (this.draggingWire) {
-            this.ctx.strokeStyle = "#888";
-            this.ctx.lineWidth = 2;
-            this.ctx.beginPath();
-            this.ctx.moveTo(this.draggingWire.x1, this.draggingWire.y1);
-            this.ctx.lineTo(this.draggingWire.x2, this.draggingWire.y2);
-            this.ctx.stroke();
-        }
-
-        this.ctx.restore();
     }
-}
+
+
+    // If dragging, update position and skip hover logic
+    if (this.draggingNode) {
+      const rawX = wx - this.draggingNode.offsetX;
+      const rawY = wy - this.draggingNode.offsetY;
+      const { x, y } = this.snapToGrid(rawX, rawY);
+      this.draggingNode.x = x;
+      this.draggingNode.y = y;
+
+      this.draggingNode.onHover(true);
+      return;
+    }
+
+    // If a control is hovered, skip node hover
+    if (controlHovered) {
+      for (const node of this.nodes) {
+        node.onHover(false);
+      }
+      return;
+    }
+
+    // Otherwise, handle node hover normally
+    let hoveringHandled = false;
+    for (let i = this.nodes.length - 1; i >= 0; i--) {
+      const node = this.nodes[i];
+      if (!hoveringHandled && node.contains(wx, wy)) {
+        node.onHover(true);
+        hoveringHandled = true;
+      } else {
+        node.onHover(false);
+      }
+    }
+  }
+
+
+
+  onMouseUp(e) {
+    const { x: wx, y: wy } = this.screenToWorld(e.clientX, e.clientY);
+    if (this.isPanning) {
+      this.isPanning = false;
+      return;
+    }
+
+    if (this.draggingConnection) {
+      for (const node of this.nodes) {
+        if (node.hasInput) {
+          const { x, y } = node.input;
+          const radius = 8;
+          const dx = wx - x;
+          const dy = wy - y;
+
+          if (dx * dx + dy * dy < radius * radius) {
+            // Remove any existing connection to this node's input
+            for (let i = this.connections.length - 1; i >= 0; i--) {
+              if (this.connections[i].to === node) {
+                this.connections.splice(i, 1);
+              }
+            }
+
+            // Add the new connection
+            this.connections.push({
+              from: this.draggingConnection.fromNode,
+              to: node
+            });
+
+            break;
+          }
+        }
+      }
+
+      this.draggingConnection = null;
+    }
+
+
+
+    for (const node of this.nodes) {
+      for (const control of node.controls) {
+        control._ctx = this.ctx; // inject context if needed
+        const handled = control.onEvent?.("mouseUp", {
+          mx: wx,
+          my: wy,
+          parentX: node.x,
+          parentY: node.y
+        });
+        if (handled) return;
+      }
+    }
+
+
+    if (this.draggingNode) {
+      this.draggingNode.onDrag(false);
+      this.draggingNode = null;
+    }
+
+    for (const node of this.nodes) {
+      node.onSelect(false);
+    }
+  }
+
+  onDoubleClick(e) {
+    const { x: wx, y: wy } = this.screenToWorld(e.clientX, e.clientY);
+
+    // First: check if a node was double-clicked
+    for (let i = this.nodes.length - 1; i >= 0; i--) {
+      const node = this.nodes[i];
+      if (!node.canDelete){
+        continue;
+      }
+      const nodeBounds = {
+        x: node.x,
+        y: node.y,
+        width: node.width ?? 120, // fallback width
+        height: node.height ?? 60, // fallback height
+      };
+
+      if (
+        wx >= nodeBounds.x &&
+        wx <= nodeBounds.x + nodeBounds.width &&
+        wy >= nodeBounds.y &&
+        wy <= nodeBounds.y + nodeBounds.height
+      ) {
+        console.log("Double-clicked node:", node);
+        this.nodes.splice(i, 1);
+
+        // Remove any connections involving this node
+        this.connections = this.connections.filter(
+          conn => conn.from !== node && conn.to !== node
+        );
+
+        return;
+      }
+    }
+
+    // Second: check if a connection was double-clicked
+    for (let i = this.connections.length - 1; i >= 0; i--) {
+      const conn = this.connections[i];
+      const x1 = conn.from.output.x;
+      const y1 = conn.from.output.y;
+      const x2 = conn.to.input.x;
+      const y2 = conn.to.input.y;
+      const dx = Math.abs(x2 - x1) * 0.5;
+
+      for (let t = 0; t <= 1; t += 0.05) {
+        const px = this.bezierPoint(x1, x1 + dx, x2 - dx, x2, t);
+        const py = this.bezierPoint(y1, y1, y2, y2, t);
+        const dist = Math.hypot(wx - px, wy - py);
+        if (dist < 8) {
+          console.log("Double-clicked connection");
+          this.connections.splice(i, 1);
+          return;
+        }
+      }
+    }
+  }
+
+
+
+  onWheel(e) {
+    const { x: wx, y: wy } = this.screenToWorld(e.clientX, e.clientY);
+
+    // Check if any control is under the cursor
+    for (let i = this.nodes.length - 1; i >= 0; i--) {
+      const node = this.nodes[i];
+      for (const control of node.controls) {
+        if (control.contains?.(wx, wy, node.x, node.y)) {
+          const direction = e.deltaY < 0 ? 1 : -1;
+          control.onScroll?.(direction);
+          e.preventDefault(); // prevent zoom
+          return;
+        }
+      }
+    }
+
+    // No control captured scroll — apply zoom
+    e.preventDefault();
+    const zoomFactor = 1.1;
+    const mouseX = e.clientX;
+    const mouseY = e.clientY;
+
+    const canvasRect = this.canvas.getBoundingClientRect();
+    const x = (mouseX - canvasRect.left - this.offsetX) / this.zoom;
+    const y = (mouseY - canvasRect.top - this.offsetY) / this.zoom;
+    const prevZoom = this.zoom;
+    if (e.deltaY < 0) {
+      this.zoom *= zoomFactor;
+    } else {
+      this.zoom /= zoomFactor;
+    }
+
+    // Adjust offset to keep world-space point under cursor fixed
+    this.offsetX -= (wx * this.zoom - wx * prevZoom);
+    this.offsetY -= (wy * this.zoom - wy * prevZoom);
+  }
+
+  onContextMenu(e) {
+    e.preventDefault();
+
+    const { x: wx, y: wy } = this.screenToWorld(e.clientX, e.clientY);
+
+    const menu = document.createElement("div");
+    menu.className = "context-menu";
+    menu.style.position = "fixed";
+    menu.style.left = `${e.clientX}px`;
+    menu.style.top = `${e.clientY}px`; // drops down from cursor
+    menu.style.background = "#222";
+    menu.style.color = "#fff";
+    menu.style.padding = "4px 0";
+    menu.style.borderRadius = "6px";
+    menu.style.boxShadow = "0 4px 12px rgba(0,0,0,0.4)";
+    menu.style.zIndex = 1000;
+    menu.style.fontFamily = "sans-serif";
+    menu.style.minWidth = "160px";
+
+    const options = [
+      //{ label: "Add Servo", action: () => this.addNode(new ServoNode(wx, wy, 0)) },
+      //{ label: "Add Curve", action: () => this.addNode(new CurveNode(wx, wy, 0)) },
+      { label: "Add Noise", action: () => this.addNode(new NoiseNode(wx, wy)) },
+      { label: "Add Variable", action: () => this.addNode(new VariableNode(wx, wy)) },
+      { label: "Add Math", action: () => this.addNode(new MathNode(wx, wy)) },
+      { label: "Add Map", action: () => this.addNode(new MapNode(wx, wy)) },
+    ];
+
+    options.forEach(opt => {
+      const item = document.createElement("div");
+      item.textContent = opt.label;
+      item.style.padding = "6px 12px";
+      item.style.cursor = "pointer";
+      item.style.transition = "background 0.2s ease";
+      item.addEventListener("mouseenter", () => {
+        item.style.background = "#444";
+      });
+      item.addEventListener("mouseleave", () => {
+        item.style.background = "transparent";
+      });
+      item.addEventListener("click", () => {
+        opt.action();
+        document.body.removeChild(menu);
+      });
+      menu.appendChild(item);
+    });
+
+    document.body.appendChild(menu);
+
+    const removeMenu = () => {
+      if (document.body.contains(menu)) {
+        document.body.removeChild(menu);
+      }
+    };
+
+    setTimeout(() => {
+      document.addEventListener("click", removeMenu, { once: true });
+    }, 0);
+  }
+
+
+
+  bezierPoint(p0, p1, p2, p3, t) {
+    const c0 = (1 - t) ** 3;
+    const c1 = 3 * (1 - t) ** 2 * t;
+    const c2 = 3 * (1 - t) * t ** 2;
+    const c3 = t ** 3;
+    return c0 * p0 + c1 * p1 + c2 * p2 + c3 * p3;
+  }
+
+
+}
\ No newline at end of file
diff --git a/nodeeditor/NodeSerializer.js b/nodeeditor/NodeSerializer.js
new file mode 100644
index 0000000..6f4bbef
--- /dev/null
+++ b/nodeeditor/NodeSerializer.js
@@ -0,0 +1,224 @@
+import { Node, ServoNode, VariableNode, CurveNode, MathNode, MapNode, NoiseNode } from './Node.js';
+
+export const NODE_TYPES = {
+    Node: 0x01,
+    Servo: 0x02,
+    Curve: 0x03,
+    Noise: 0x04,
+    Variable: 0x05,
+    Math: 0x06,
+    Map: 0x07
+};
+
+function GetNodeType(node) {
+    console.log(node.constructor.name);
+    switch (node.constructor.name) {
+        case "ServoNode":
+            return NODE_TYPES.Servo;
+        case "CurveNode":
+            return NODE_TYPES.Curve;
+        case "NoiseNode":
+            return NODE_TYPES.Noise;
+        case "VariableNode":
+            return NODE_TYPES.Variable;
+        case "MathNode":
+            return NODE_TYPES.Math;
+        case "MapNode":
+            return NODE_TYPES.Map;
+        default:
+            return NODE_TYPES.Node;
+    }
+}
+
+export function encodeNodeGraph(nodes, connections) {
+    const bufferSize = 1024; // adjust based on expected graph size
+    const buffer = new ArrayBuffer(bufferSize);
+    const view = new DataView(buffer);
+    let offset = 0;
+
+
+    // Node count (1 byte)
+    view.setUint8(offset++, nodes.length);
+    //console.log(ndoes);
+    // Encode nodes
+    nodes.forEach((node, index) => {
+        node.id = index;
+        node.type = GetNodeType(node);
+
+        view.setUint8(offset++, node.type); // Node type
+        view.setUint8(offset++, node.id);  // Node ID
+        view.setUint16(offset, node.x, true); offset += 2;
+        view.setUint16(offset, node.y, true); offset += 2;
+
+
+        switch (node.type) {
+            case NODE_TYPES.Servo:
+                view.setUint8(offset++, node.controls[0].getValue());
+                break;
+
+            case NODE_TYPES.Curve:
+                view.setUint8(offset++, node.controls[0].getValue());
+                break;
+
+            case NODE_TYPES.Noise:
+                view.setFloat32(offset, node.controls[0].getValue(), true); offset += 4;
+                view.setUint16(offset, node.controls[1].getValue()); offset += 2;
+                break;
+
+
+            case NODE_TYPES.Variable:
+                view.setUint8(offset++, node.controls[0].getValue());
+                view.setUint8(offset++, node.controls[1].getValue());
+                break;
+
+
+            case NODE_TYPES.Math:
+                view.setUint8(offset++, node.controls[0].getValue());
+                view.setFloat32(offset, node.controls[1].getValue(), true); offset += 4;
+                break;
+
+            case NODE_TYPES.Map:
+                view.setFloat32(offset, node.controls[0].getValue(), true); offset += 4;
+                view.setFloat32(offset, node.controls[1].getValue(), true); offset += 4;
+                view.setFloat32(offset, node.controls[2].getValue(), true); offset += 4;
+                view.setFloat32(offset, node.controls[3].getValue(), true); offset += 4;
+                //console.log(node.inMinInput.numericValue, node.inMaxInput.numericValue, node.outMinInput.numericValue, node.outMaxInput.numericValue);
+                break;
+
+            default:
+                console.warn("Unknown node type:", node);
+        }
+    });
+
+    // Connection count (1 byte)
+    view.setUint8(offset++, connections.length);
+
+    // Encode connections
+    connections.forEach(conn => {
+        view.setUint8(offset++, conn.from.id);
+        view.setUint8(offset++, conn.to.id);
+    });
+
+    // Slice the buffer to actual used size
+    return new Uint8Array(buffer.slice(0, offset));
+}
+
+export function loadFromBinary(editor, data) {
+    let nodes = []
+    let connections = []
+    const view = new DataView(data.buffer);
+    let offset = 0;
+
+    const nodeCount = view.getUint8(offset++);
+    const idMap = {}; // Map node IDs to actual node instances
+
+    for (let i = 0; i < nodeCount; i++) {
+        const type = view.getUint8(offset++);
+        const id = view.getUint8(offset++);
+        const x = view.getUint16(offset, true); offset += 2;
+        const y = view.getUint16(offset, true); offset += 2;
+
+        let node = null;
+
+        switch (type) {
+            case NODE_TYPES.Servo: {
+                const motorID = view.getUint8(offset++);
+                const newNode = new ServoNode(x, y, motorID);
+                editor.nodes.push(newNode);
+                node = newNode;
+                break;
+            }
+            case NODE_TYPES.Curve: {
+                const curveID = view.getUint8(offset++);
+                const newNode = new CurveNode(x, y, curveID);
+                editor.nodes.push(newNode);
+                node = newNode;
+                break;
+            }
+            case NODE_TYPES.Noise: {
+                const frequency = view.getFloat32(offset, true); offset += 4;
+                const seed = view.getUint16(offset, true); offset += 2;
+                const newNode = new NoiseNode(x, y);
+                editor.nodes.push(newNode);
+                node = newNode;
+                node.controls[0].text = String(frequency);
+                node.controls[1].text = String(seed);
+                break;
+            }
+            case NODE_TYPES.Variable: {
+                const source = view.getUint8(offset++);
+                const arg0 = view.getUint8(offset++);
+                const newNode = new VariableNode(x, y);
+                editor.nodes.push(newNode);
+                node = newNode;
+                node.controls[0].selectedIndex = source;
+                node.controls[1].value = arg0;
+                break;
+            }
+            case NODE_TYPES.Math: {
+                const op = view.getUint8(offset++);
+                const value = view.getFloat32(offset, true); offset += 4;
+                const newNode = new MathNode(x, y);
+                editor.nodes.push(newNode);
+                node = newNode;
+                node.controls[0].selectedIndex = op;
+                node.controls[1].text = String(value);
+                break;
+            }
+            case NODE_TYPES.Map: {
+                const inMin = view.getFloat32(offset, true); offset += 4;
+                const inMax = view.getFloat32(offset, true); offset += 4;
+                const outMin = view.getFloat32(offset, true); offset += 4;
+                const outMax = view.getFloat32(offset, true); offset += 4;
+                const newNode = new MapNode(x, y);
+                editor.nodes.push(newNode);
+                node = newNode;
+                node.controls[0].text = String(inMin);
+                node.controls[1].text = String(inMax);
+                node.controls[2].text = String(outMin);
+                node.controls[3].text = String(outMax);
+                break;
+            }
+            default: {
+                console.error("UNKNOWN NODE");
+                break;
+            }
+        }
+
+
+        if (node) {
+            node.id = id;
+            idMap[id] = node;
+        }
+        //editor.nodes.push(node);
+    }
+
+    //console.log(this.getNodeByID(0));
+
+    // 🔗 Load connections
+    const connectionCount = view.getUint8(offset++);
+    for (let i = 0; i < connectionCount; i++) {
+        const fromID = view.getUint8(offset++);
+        const toID = view.getUint8(offset++);
+        const fromNode = idMap[fromID];
+        const toNode = idMap[toID];
+        if (fromNode && toNode) {
+            editor.connections.push({ from: fromNode, to: toNode });
+        }
+    }
+
+
+    // Reencode all positions to SIGNED ints
+    editor.nodes.forEach(node => {
+        node.x = (node.x << 16) >> 16;
+        node.y = (node.y << 16) >> 16;
+    });
+
+
+    //editor.nodes = nodes;
+    //editor.connections = connections;
+    console.log(editor.nodes);
+    console.log(editor.connections);
+    editor.draw();
+    //this._redraw();
+}
\ No newline at end of file
diff --git a/nodeeditor/canvastools.js b/nodeeditor/canvastools.js
deleted file mode 100644
index ce93936..0000000
--- a/nodeeditor/canvastools.js
+++ /dev/null
@@ -1,217 +0,0 @@
-export class CanvasTextInput {
-    constructor(offsetX, offsetY, width = 120, value = "", label = "", options = {}) {
-        this.x = 0;
-        this.y = 0;
-        this.offsetX = offsetX;
-        this.offsetY = offsetY;
-        this.width = width;
-        this.height = 24;
-        this.labelOffset = 16; // space above input for label
-        this.value = String(value);
-        //this.placeholder = placeholder;
-        this.focused = false;
-        this.cursorVisible = false;
-        this.cursorTimer = 0;
-
-        this.mode = options.mode || "float";  // "int" or "float"
-
-        this.min = options.min ?? -Infinity;
-        this.max = options.max ?? Infinity;
-        this.label = label || "";
-    }
-
-
-
-
-    draw(ctx) {
-        if (this.label) {
-            ctx.fillStyle = "#000";
-            ctx.font = "13px sans-serif";
-            ctx.fillText(this.label, this.x, this.y - this.labelOffset + 15);
-        }
-
-
-        ctx.fillStyle = "#fff";
-        ctx.strokeStyle = "#666";
-        ctx.fillRect(this.x, this.y, this.width, this.height);
-        ctx.strokeRect(this.x, this.y, this.width, this.height);
-
-        ctx.fillStyle = "#000";
-        ctx.font = "14px sans-serif";
-        const text = this.value || this.placeholder;
-        ctx.fillText(text, this.x + 5, this.y + 15);
-
-        if (this.focused && this.cursorVisible) {
-            const textWidth = ctx.measureText(this.value).width;
-            ctx.beginPath();
-            ctx.moveTo(this.x + 5 + textWidth, this.y + 4);
-            ctx.lineTo(this.x + 5 + textWidth, this.y + this.height - 4);
-            ctx.strokeStyle = "#000";
-            ctx.stroke();
-        }
-    }
-
-    contains(mx, my) {
-        return mx >= this.x && mx <= this.x + this.width &&
-            my >= this.y && my <= this.y + this.height;
-    }
-
-    handleClick(mx, my) {
-        console.log("HERE", mx, my);
-        this.focused = this.contains(mx, my);
-        return this.focused;
-    }
-
-    handleKey(e) {
-        if (!this.focused) return false;
-        console.log(e);
-        if (e.key === "Backspace") {
-            this.value = String(this.value).slice(0, -1);
-        } else if (e.key === "Enter") {
-            this.clampToRange(); // 👈 clamp on Enter
-            this.focused = false;
-        } else if (e.key.length === 1) {
-            if (this.mode === "int") {
-                if (/[\d\-]/.test(e.key)) {
-                    this.value += e.key;
-                }
-            } else if (this.mode === "float") {
-                if (/[\d.\-]/.test(e.key)) {
-                    this.value += e.key;
-                }
-            }
-
-        }
-
-        return true;
-    }
-
-
-
-    update(dt) {
-        this.cursorTimer += dt;
-        if (this.cursorTimer > 500) {
-            this.cursorVisible = !this.cursorVisible;
-            this.cursorTimer = 0;
-        }
-    }
-
-    handleMouseMove(mx, my) {
-        // Optional: highlight or cursor change
-        return this.contains(mx, my);
-    }
-
-
-    clampToRange() {
-        let val = parseFloat(this.value);
-        if (isNaN(val)) val = 0;
-        val = Math.min(this.max, Math.max(this.min, val));
-        this.value = String(val);
-    }
-
-
-    get numericValue() {
-        let val = parseFloat(this.value);
-        if (isNaN(val)) return 0;
-        return Math.min(this.max, Math.max(this.min, val));
-    }
-
-}
-
-
-export class CanvasDropdown {
-    constructor(offsetX, offsetY, width, items = [], selected = 0) {
-        this.x = 0;
-        this.y = 0
-        this.offsetX = offsetX;
-        this.offsetY = offsetY;
-        this.width = width;
-        this.height = 20;
-        this.items = items;
-        this.selectedIndex = 0;
-        this.open = false;
-        this.hoverIndex = -1;
-    }
-
-    draw(ctx) {
-        // Collapsed box
-        ctx.fillStyle = "#eee";
-        ctx.strokeStyle = "#666";
-        ctx.fillRect(this.x, this.y, this.width, this.height);
-        ctx.strokeRect(this.x, this.y, this.width, this.height);
-
-        ctx.fillStyle = "#000";
-        ctx.font = "14px sans-serif";
-        ctx.fillText(this.items[this.selectedIndex], this.x + 5, this.y + 15);
-
-        // Expanded list
-        if (this.open) {
-            for (let i = 0; i < this.items.length; i++) {
-                const itemY = this.y + this.height + i * this.height;
-                ctx.fillStyle = i === this.hoverIndex ? "#cce" : "#fff";
-                ctx.fillRect(this.x, itemY, this.width, this.height);
-                ctx.strokeRect(this.x, itemY, this.width, this.height);
-                ctx.fillStyle = "#000";
-                ctx.fillText(this.items[i], this.x + 5, itemY + 15);
-            }
-        }
-    }
-
-    contains(mx, my) {
-        const totalHeight = this.height + (this.open ? this.items.length * this.height : 0);
-        return mx >= this.x && mx <= this.x + this.width &&
-            my >= this.y && my <= this.y + totalHeight;
-    }
-
-    handleClick(mx, my) {
-        if (this.open) {
-            for (let i = 0; i < this.items.length; i++) {
-                const itemY = this.y + this.height + i * this.height;
-                if (mx >= this.x && mx <= this.x + this.width &&
-                    my >= itemY && my <= itemY + this.height) {
-                    this.selectedIndex = i;
-                    this.selected = this.items[i];  // 👈 This line is missing
-                    this.open = false;
-                    this.hoverIndex = -1;
-                    return true;
-                }
-            }
-            this.open = false;
-            this.hoverIndex = -1;
-            return true;
-        }
-
-        if (mx >= this.x && mx <= this.x + this.width &&
-            my >= this.y && my <= this.y + this.height) {
-            this.open = true;
-            return true;
-        }
-
-        return false;
-    }
-
-    handleMouseMove(mx, my) {
-        if (!this.open) return false;
-
-        let hovered = -1;
-        for (let i = 0; i < this.items.length; i++) {
-            const itemY = this.y + this.height + i * this.height;
-            if (mx >= this.x && mx <= this.x + this.width &&
-                my >= itemY && my <= itemY + this.height) {
-                hovered = i;
-                break;
-            }
-        }
-
-        if (hovered !== this.hoverIndex) {
-            this.hoverIndex = hovered;
-            return true;
-        }
-
-        return false;
-    }
-
-    get selectedValue() {
-        return this.items[this.selectedIndex];
-    }
-}
diff --git a/nodeeditor/nodes.js b/nodeeditor/nodes.js
deleted file mode 100644
index 3522682..0000000
--- a/nodeeditor/nodes.js
+++ /dev/null
@@ -1,668 +0,0 @@
-import { CanvasDropdown, CanvasTextInput } from "./canvastools.js"
-
-export const NODE_TYPES = {
-    Node: 0x01,
-    Servo: 0x02,
-    Curve: 0x03,
-    Noise: 0x04,
-    Variable: 0x05,
-    Math: 0x06,
-    Map: 0x07
-};
-
-export class Node {
-    constructor(x, y, label, options = {}) {
-        this.type = NODE_TYPES.Node;
-        this.x = x;
-        this.y = y;
-        this.width = 120;
-        this.height = 60;
-        this.label = label;
-        this.input = { x: 0, y: 0 };
-        this.output = { x: 0, y: 0 };
-        //console.log(options.fill);
-        // Customizable visual options
-        this.color = options.fill || "#fef6e4";     // pastel fill default
-        this.border = options.stroke || "#333";     // border color default
-
-        this.hasInput = false;
-        this.hasOutput = false;
-        this.canDelete = true;
-
-        this.inputs = [];
-
-        this.updatePorts();
-    }
-
-
-
-    updatePorts() {
-        this.input.x = this.x - 5;
-        this.input.y = this.y + this.height / 2;
-        this.output.x = this.x + this.width + 5;
-        this.output.y = this.y + this.height / 2;
-    }
-
-
-
-    draw(ctx) {
-        ctx.fillStyle = this.color;
-        ctx.strokeStyle = this.border;
-        ctx.lineWidth = 1;
-
-        this.drawRoundedRect(ctx, this.x, this.y, this.width, this.height, 10);
-        ctx.fill();
-        ctx.stroke();
-
-        ctx.fillStyle = "#000";
-        ctx.font = "14px sans-serif";
-        ctx.fillText(this.label, this.x + 10, this.y + 20);
-
-        this.updatePorts();
-        if (this.hasInput) {
-            ctx.beginPath();
-            ctx.arc(this.input.x, this.input.y, 6, 0, Math.PI * 2);
-            ctx.fillStyle = "#888";
-            ctx.fill();
-        }
-
-        if (this.hasOutput) {
-            ctx.beginPath();
-            ctx.arc(this.output.x, this.output.y, 6, 0, Math.PI * 2);
-            ctx.fillStyle = "#888";
-            ctx.fill();
-        }
-    }
-
-
-
-    drawRoundedRect(ctx, x, y, w, h, r) {
-        ctx.beginPath();
-        ctx.moveTo(x + r, y);
-        ctx.lineTo(x + w - r, y);
-        ctx.quadraticCurveTo(x + w, y, x + w, y + r);
-        ctx.lineTo(x + w, y + h - r);
-        ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h);
-        ctx.lineTo(x + r, y + h);
-        ctx.quadraticCurveTo(x, y + h, x, y + h - r);
-        ctx.lineTo(x, y + r);
-        ctx.quadraticCurveTo(x, y, x + r, y);
-        ctx.closePath();
-    }
-
-
-    contains(x, y) {
-        return x >= this.x && x <= this.x + this.width &&
-            y >= this.y && y <= this.y + this.height;
-    }
-
-    hitOutput(x, y) {
-        if (this.hasOutput) {
-            return Math.hypot(x - this.output.x, y - this.output.y) < 8;
-        } else {
-            return null;
-        }
-    }
-
-    hitInput(x, y) {
-        if (this.hasInput) {
-            return Math.hypot(x - this.input.x, y - this.input.y) < 8;
-        } else {
-            return null;
-        }
-    }
-}
-
-export class ServoNode extends Node {
-    constructor(x, y, label, motorId) {
-        super(x, y, label);
-        this.type = NODE_TYPES.Servo;
-        this.motorId = motorId;
-        this.width = 140;
-        this.height = 80;
-
-        this.hasInput = true;
-        this.hasOutput = false;
-        this.canDelete = false;
-    }
-
-    draw(ctx) {
-        // Node box
-        super.draw(ctx)
-
-        // Motor ID display
-        ctx.font = "12px sans-serif";
-        ctx.fillText(`Motor ${this.motorId}`, this.x + 10, this.y + 40);
-
-    }
-
-    hitOutput(x, y) {
-        return null;
-    }
-
-    contains(x, y) {
-        return super.contains(x, y);
-    }
-
-    handleClick(mx, my) {
-
-        if (this.contains(mx, my)) {
-            window.setSelectedMotor?.(this.motorId); // or this.selectedMotorId if using dropdown
-            return false;
-        }
-        return false;
-    }
-
-
-    handleMouseMove(mx, my) {
-        return false;
-    }
-
-    get selectedMotorId() {
-        return this.motorId;
-    }
-}
-
-export class CurveNode extends Node {
-    constructor(x, y, label = "Curve", curveId = 0) {
-        super(x, y, label);
-        this.type = NODE_TYPES.Curve;
-        this.curveId = curveId;
-        this.width = 140;
-        this.height = 80;
-
-
-        this.hasInput = false;
-        this.hasOutput = true;
-        this.canDelete = false;
-    }
-
-    draw(ctx) {
-        super.draw(ctx);
-
-        // Curve ID display
-        ctx.font = "12px sans-serif";
-        ctx.fillText(`Curve ${this.curveId}`, this.x + 10, this.y + 40);
-
-    }
-
-
-    contains(x, y) {
-        return super.contains(x, y);
-    }
-
-    handleClick(mx, my) {
-        if (this.contains(mx, my)) {
-            window.setSelectedMotor?.(this.curveId);
-            return false;
-        }
-        return false;
-    }
-
-
-    handleMouseMove(mx, my) {
-        return false;
-    }
-
-    update(dt) {
-        // Placeholder: simulate curve output
-        const t = Date.now() / 1000;
-        this.lastValue = Math.sin(t + this.curveId); // simple sine curve
-        return false;
-    }
-
-    get outputValue() {
-        return this.lastValue;
-    }
-}
-
-export class InputNode extends Node {
-    constructor(x, y, label, options) {
-        super(x, y, label);
-        console.log(options);
-        this.inputField = new CanvasTextInput(
-            this.x + 10,
-            this.y + 35,
-            this.width - 20,
-            "1.0",
-            "",
-            { defaultValue: 1.0, numericOnly: true, min: 0, max: 10 }
-        );
-
-        this.inputs.push(this.inputField);
-
-    }
-
-
-
-    draw(ctx) {
-        // Node box
-        ctx.fillStyle = this.color || "#e0f7ff";
-        ctx.strokeStyle = this.border || "#333";
-        ctx.lineWidth = 1;
-        this.drawRoundedRect(ctx, this.x, this.y, this.width, this.height, 10);
-        ctx.fill();
-        ctx.stroke();
-
-        // Label
-        ctx.fillStyle = "#000";
-        ctx.font = "14px sans-serif";
-        ctx.fillText(this.label, this.x + 10, this.y + 20);
-
-        // Input field
-        this.inputField.x = this.x + 10;
-        this.inputField.y = this.y + 35;
-        this.inputField.draw(ctx);
-
-        // Output port
-        ctx.beginPath();
-        ctx.arc(this.output.x, this.output.y, 6, 0, Math.PI * 2);
-        ctx.fillStyle = "#888";
-        ctx.fill();
-    }
-
-    contains(x, y) {
-        return super.contains(x, y) || this.inputField.contains(x, y);
-    }
-
-    handleClick(mx, my) {
-        console.log(mx, my);
-        return this.inputField.handleClick(mx, my);
-    }
-
-    handleKey(e) {
-        return this.inputField.handleKey(e);
-    }
-
-
-    get outputValue() {
-        return this.inputField.numericValue;
-    }
-}
-
-export class NoiseNode extends Node {
-    constructor(x, y, label = "Noise Generator") {
-        super(x, y, label);
-        this.type = NODE_TYPES.Noise;
-        this.width = 180;
-        this.height = 180;
-
-        this.inputFrequency = new CanvasTextInput(10, 45, this.width - 20, "1.0", "Frequency", { mode: "float" });
-        this.inputSeed = new CanvasTextInput(10, 70 + 10, this.width - 20, "0", "Seed", { mode: "int" });
-
-        this.inputs.push(this.inputFrequency);
-        this.inputs.push(this.inputSeed);
-
-        this.hasInput = false;
-        this.hasOutput = true;
-
-    }
-
-
-    draw(ctx) {
-        let max = 0
-        super.draw(ctx);
-        for (const input of [this.inputFrequency, this.inputSeed]) {
-            input.x = this.x + input.offsetX;
-            input.y = this.y + input.offsetY;
-            input.draw(ctx);
-        }
-
-        // 🔹 Noise preview
-        const freq = Math.max(0.01, this.inputFrequency.numericValue);
-        const seed = this.inputSeed.numericValue;
-        const steps = 480;
-        const previewHeight = 60;
-        const previewWidth = this.width - 20;
-        const startX = this.x + 10;
-        const startY = this.y + this.height - previewHeight - 10;
-
-        ctx.beginPath();
-        for (let i = 0; i < steps; i++) {
-            const t = i / steps * freq * 10;  // scale up to get more variation
-
-            const noise = perlin1D_octave(seed, t);
-            if (noise > max) {
-                max = noise;
-                //console.log(noise);
-            }
-            const x = startX + (i / steps) * previewWidth;
-            const y = startY + previewHeight / 2 - noise * (previewHeight / 2);
-
-            if (i === 0) ctx.moveTo(x, y);
-            else ctx.lineTo(x, y);
-        }
-        ctx.strokeStyle = "#444";
-        ctx.stroke();
-    }
-
-    contains(x, y) {
-        return super.contains(x, y) || [this.inputFrequency, this.inputSeed].some(i => i.contains(x, y));
-    }
-
-    handleKey(e) {
-        return (
-            this.inputFrequency.handleKey(e) ||
-            this.inputSeed.handleKey(e)
-        );
-    }
-
-
-    handleClick(mx, my) {
-        return false;//[this.inputFrequency, this.inputSeed].some(i => i.handleClick(mx, my));
-    }
-
-    handleMouseMove(mx, my) {
-        return [this.inputFrequency, this.inputSeed].some(i => i.handleMouseMove(mx, my));
-    }
-
-    update(dt) {
-        return [this.inputFrequency, this.inputSeed].some(i => i.update(dt));
-    }
-
-    get outputValue() {
-        const input = this.inputNode?.outputValue ?? 0;
-        const inFrequency = this.inputFrequency.numericValue;
-        const inSeed = this.inputSeed.numericValue;
-
-        return 0;
-    }
-}
-
-export class VariableNode extends Node {
-    constructor(x, y, label = "Variable") {
-        super(x, y, label);
-        this.type = NODE_TYPES.Variable;
-        this.width = 160;
-        this.height = 100;
-
-        this.variableDropdown = new CanvasDropdown(
-            10, 45, this.width - 20,
-            ["faceDetectX", "faceDetectY", "sine", "analogRead()", "servo"],
-            "sine"
-        );
-        this.arg0Input = new CanvasTextInput(10, 75, this.width - 20, "0", "Motor ID", { mode: "int" });
-        this.inputs.push(this.variableDropdown);
-        this.inputs.push(this.arg0Input);
-
-        this.hasInput = false;
-        this.hasOutput = true;
-    }
-
-    draw(ctx) {
-        super.draw(ctx);
-
-
-        // Dropdown label
-        ctx.fillText("Source", this.x + 10, this.y + 42);
-
-        if (this.variableDropdown.selected === "servo") {
-            this.arg0Input.x = this.x + this.arg0Input.offsetX;
-            this.arg0Input.y = this.y + this.arg0Input.offsetY;
-            this.arg0Input.draw(ctx);
-        }
-
-        // Dropdown
-        this.variableDropdown.x = this.x + this.variableDropdown.offsetX;
-        this.variableDropdown.y = this.y + this.variableDropdown.offsetY;
-        this.variableDropdown.draw(ctx);
-
-
-
-    }
-
-    contains(x, y) {
-        return super.contains(x, y) || [this.variableDropdown, this.arg0Input].some(i => i.contains(x, y));
-    }
-
-    handleKey(e) {
-        return (
-            this.arg0Input.handleKey(e)
-        );
-    }
-
-
-    handleClick(mx, my) {
-        return false;//[this.inputFrequency, this.inputSeed].some(i => i.handleClick(mx, my));
-    }
-
-    handleMouseMove(mx, my) {
-        return [this.variableDropdown, this.arg0Input].some(i => i.handleMouseMove(mx, my));
-    }
-
-    update(dt) {
-        return [this.variableDropdown, this.arg0Input].some(i => i.update(dt));
-    }
-
-    get outputValue() {
-        return this.lastValue;
-    }
-}
-
-export class MathNode extends Node {
-    constructor(x, y, label = "Math") {
-        super(x, y, label);
-        this.type = NODE_TYPES.Math;
-        this.width = 160;
-        this.height = 110;
-
-        this.operatorDropdown = new CanvasDropdown(
-            10, 45, this.width - 20,
-            ["*", "/", "+", "-"],
-            "*"
-        );
-        this.valueInput = new CanvasTextInput(10, 75, this.width - 20, "1.0", "Value", { mode: "float" });
-
-        this.inputs.push(this.operatorDropdown);
-        this.inputs.push(this.valueInput);
-
-        this.hasInput = true;
-        this.hasOutput = true;
-    }
-
-    draw(ctx) {
-        super.draw(ctx);
-
-        //ctx.fillText("Value", this.x + 10, this.y + 72);
-        this.valueInput.x = this.x + this.valueInput.offsetX;
-        this.valueInput.y = this.y + this.valueInput.offsetY;
-        this.valueInput.draw(ctx);
-
-        ctx.fillText("Operator", this.x + 10, this.y + 42);
-        this.operatorDropdown.x = this.x + this.operatorDropdown.offsetX;
-        this.operatorDropdown.y = this.y + this.operatorDropdown.offsetY;
-        this.operatorDropdown.draw(ctx);
-    }
-
-    contains(x, y) {
-        return (
-            super.contains(x, y) ||
-            this.operatorDropdown.contains(x, y) ||
-            this.valueInput.contains(x, y)
-        );
-    }
-
-    handleKey(e) {
-        return this.valueInput.handleKey(e);
-    }
-
-
-    handleClick(mx, my) {
-        return (
-            this.operatorDropdown.handleClick(mx, my) ||
-            this.valueInput.handleClick(mx, my)
-        );
-    }
-
-    handleMouseMove(mx, my) {
-        return (
-            this.operatorDropdown.handleMouseMove(mx, my) ||
-            this.valueInput.handleMouseMove(mx, my)
-        );
-    }
-
-    update(dt) {
-        const changedDropdown = this.operatorDropdown.update(dt);
-        const changedInput = this.valueInput.update(dt);
-        return changedDropdown || changedInput;
-    }
-
-    get outputValue() {
-        const input = this.inputNode?.outputValue ?? 0;
-        const value = parseFloat(this.valueInput.text) || 0;
-        const op = this.operatorDropdown.selected;
-
-        switch (op) {
-            case "*": return input * value;
-            case "/": return value !== 0 ? input / value : 0;
-            case "+": return input + value;
-            case "-": return input - value;
-            default: return input;
-        }
-    }
-}
-
-export class MapNode extends Node {
-    constructor(x, y, label = "Map") {
-        super(x, y, label);
-        this.type = NODE_TYPES.Map;
-        this.width = 180;
-        this.height = 180;
-
-        this.inMinInput = new CanvasTextInput(10, 45, this.width - 20, "0", "In Min", { mode: "float" });
-        this.inMaxInput = new CanvasTextInput(10, 70 + 10, this.width - 20, "4095", "In Max", { mode: "float" });
-        this.outMinInput = new CanvasTextInput(10, 95 + 20, this.width - 20, "1024", "Out Min", { mode: "float" });
-        this.outMaxInput = new CanvasTextInput(10, 120 + 30, this.width - 20, "3072", "Out Max", { mode: "float" });
-
-        this.inputs.push(this.inMinInput);
-        this.inputs.push(this.inMaxInput);
-        this.inputs.push(this.outMinInput);
-        this.inputs.push(this.outMaxInput);
-
-        this.hasInput = true;
-        this.hasOutput = true;
-    }
-
-    draw(ctx) {
-        super.draw(ctx);
-        for (const input of [this.inMinInput, this.inMaxInput, this.outMinInput, this.outMaxInput]) {
-            input.x = this.x + input.offsetX;
-            input.y = this.y + input.offsetY;
-            input.draw(ctx);
-        }
-    }
-
-    contains(x, y) {
-        return super.contains(x, y) || [this.inMinInput, this.inMaxInput, this.outMinInput, this.outMaxInput].some(i => i.contains(x, y));
-    }
-
-    handleKey(e) {
-        return (
-            this.inMinInput.handleKey(e) ||
-            this.inMaxInput.handleKey(e) ||
-            this.outMinInput.handleKey(e) ||
-            this.outMaxInput.handleKey(e)
-        );
-    }
-
-
-    handleClick(mx, my) {
-        return [this.inMinInput, this.inMaxInput, this.outMinInput, this.outMaxInput].some(i => i.handleClick(mx, my));
-    }
-
-    handleMouseMove(mx, my) {
-        return [this.inMinInput, this.inMaxInput, this.outMinInput, this.outMaxInput].some(i => i.handleMouseMove(mx, my));
-    }
-
-    update(dt) {
-        return [this.inMinInput, this.inMaxInput, this.outMinInput, this.outMaxInput].some(i => i.update(dt));
-    }
-
-    get outputValue() {
-        const input = this.inputNode?.outputValue ?? 0;
-        const inMin = this.inMinInput.numericValue;
-        const inMax = this.inMaxInput.numericValue;
-        const outMin = this.outMinInput.numericValue;
-        const outMax = this.outMaxInput.numericValue;
-
-        if (inMax === inMin) return outMin;
-        return ((input - inMin) * (outMax - outMin)) / (inMax - inMin) + outMin;
-    }
-}
-
-
-
-
-const fade = t => t * t * t * (t * (t * 6 - 15) + 10);
-const lerp = (a, b, t) => a + t * (b - a);
-
-function grad(hash, x) {
-    const h = hash & 15;
-    let grad = 1 + (h & 7); // 1 to 8
-    if (h & 8) grad = -grad;
-    return (grad * x) / 4;
-    //return (hash & 1 ? -1 : 1) * x;
-}
-
-
-const perlinCache = new Map();
-
-function perlin1D_octave(seed, x, octaves = 2, persistence = 0.5) {
-    let total = 0;
-    let amplitude = 1;
-    let frequency = 1;
-    let maxValue = 0;
-
-    for (let i = 0; i < octaves; i++) {
-        total += perlin1D(seed, x * frequency) * amplitude;
-        maxValue += amplitude;
-        amplitude *= persistence;
-        frequency *= 2;
-    }
-
-    return total / maxValue;
-}
-
-function perlin1D(seed, x) {
-    let seedCache = perlinCache.get(seed);
-    if (!seedCache) {
-        seedCache = new Map();
-        perlinCache.set(seed, seedCache);
-    }
-
-    const key = Math.round(x * 1000) / 1000;  // round to reduce precision noise
-    if (seedCache.has(key)) {
-        return seedCache.get(key);
-    }
-
-    const perm = generatePermutation(seed);
-    const xi = Math.floor(x) & 255;
-    const xf = x - Math.floor(x);
-    const u = fade(xf);
-
-    const a = perm[xi];
-    const b = perm[xi + 1];
-
-    const result = lerp(grad(a, xf), grad(b, xf - 1), u);
-    seedCache.set(key, result);
-    return result;
-}
-
-function generatePermutation(seed) {
-    const perm = new Array(512);
-    const p = new Array(256);
-    let s = seed;
-    for (let i = 0; i < 256; i++) {
-        s = (s * 1664525 + 1013904223) % 4294967296;
-        p[i] = i;
-    }
-    for (let i = 255; i > 0; i--) {
-        const j = s % (i + 1);
-        [p[i], p[j]] = [p[j], p[i]];
-        s = (s * 1664525 + 1013904223) % 4294967296;
-    }
-    for (let i = 0; i < 512; i++) {
-        perm[i] = p[i & 255];
-    }
-    return perm;
-}
diff --git a/script.js b/script.js
index d9130d6..2d40328 100644
--- a/script.js
+++ b/script.js
@@ -97,7 +97,8 @@ window.onload = () => {
 
     const nodeCanvas = document.getElementById("nodeeditor");
     let nodeEditor = null;
-
+    nodeEditor = new NodeEditor(nodeCanvas);
+    nodeEditor.start();
 
     //nodeEditor.addServoNode(400, 150, "Servo Output", 5 );
     // nodeEditor.addInputNode(100, 500, "Input Nod", { defaultValue: 3 });
@@ -1077,7 +1078,7 @@ window.onload = () => {
         const packets = collectChangePackets(0); // or 2
         for (var i = 0; i < packets.length; i++) {
             let channel = 0
-            let servoMotor = getServoMotorByID(channel, parseInt(packets[i].id, 10));            
+            let servoMotor = getServoMotorByID(channel, parseInt(packets[i].id, 10));
             let dataKey = packets[i].title;
             let value = packets[i].value;
             servoMotor[dataKey] = value;