@elicdavis/node-flow 0.1.12 → 0.1.14

package/dist/index.mjs

@@ -74,7 +74,8 @@ var Theme = {
   ContextMenu: {
     BackgroundColor: "#07212A",
     HighlightColor: "#205A6D",
-    FontColor: "#afb9bb"
+    FontColor: "#afb9bb",
+    DisabledFontColor: "#4a585c"
   },
   Note: {
     FontColor: "#afb9bb",
@@ -339,22 +340,33 @@ _count2 = new WeakMap();
 
 // src/contextMenu.ts
 var contextEntryHeight = 30;
-var _name, _callback, _textStyle;
+var ContextMenuItemState = /* @__PURE__ */ ((ContextMenuItemState2) => {
+  ContextMenuItemState2[ContextMenuItemState2["Enabled"] = 0] = "Enabled";
+  ContextMenuItemState2[ContextMenuItemState2["Disabled"] = 1] = "Disabled";
+  ContextMenuItemState2[ContextMenuItemState2["Hidden"] = 2] = "Hidden";
+  return ContextMenuItemState2;
+})(ContextMenuItemState || {});
+var _name, _callback, _textStyle, _state;
 var ContextMenuItem = class {
   constructor(config) {
     __privateAdd(this, _name);
     __privateAdd(this, _callback);
     __privateAdd(this, _textStyle);
+    __privateAdd(this, _state);
     __privateSet(this, _name, (config == null ? void 0 : config.name) === void 0 ? "item" : config.name);
     __privateSet(this, _callback, config == null ? void 0 : config.callback);
     __privateSet(this, _textStyle, new TextStyle(config == null ? void 0 : config.textStyle));
     this.group = config == null ? void 0 : config.group;
+    __privateSet(this, _state, (config == null ? void 0 : config.enabled) === void 0 ? 0 /* Enabled */ : config.enabled());
   }
   getName() {
     return __privateGet(this, _name);
   }
+  state() {
+    return __privateGet(this, _state);
+  }
   execute() {
-    if (__privateGet(this, _callback) === void 0) {
+    if (__privateGet(this, _state) !== 0 /* Enabled */ || __privateGet(this, _callback) === void 0) {
       return;
     }
     __privateGet(this, _callback).call(this);
@@ -363,6 +375,7 @@ var ContextMenuItem = class {
 _name = new WeakMap();
 _callback = new WeakMap();
 _textStyle = new WeakMap();
+_state = new WeakMap();
 var _calculatedHeight;
 var ContextGroup = class {
   constructor(entries) {
@@ -436,7 +449,11 @@ var _ContextMenu = class _ContextMenu {
     }
     if ((config == null ? void 0 : config.items) !== void 0) {
       for (let i = 0; i < (config == null ? void 0 : config.items.length); i++) {
-        __privateGet(this, _items).push(new ContextMenuItem(config == null ? void 0 : config.items[i]));
+        const item = new ContextMenuItem(config == null ? void 0 : config.items[i]);
+        if (item.state() === 2 /* Hidden */) {
+          continue;
+        }
+        __privateGet(this, _items).push(item);
       }
     }
     __privateMethod(this, _ContextMenu_instances, calculateEntries_fn).call(this);
@@ -507,7 +524,8 @@ var _ContextMenu = class _ContextMenu {
             __privateSet(this, _openSubMenu, void 0);
           }
         }
-        if (entryMousedOver || __privateGet(this, _openSubMenu) !== void 0 && entry.subMenu === __privateGet(this, _openSubMenu)) {
+        const itemDisabled = entry.item !== void 0 && entry.item.state() === 1 /* Disabled */;
+        if (!itemDisabled && (entryMousedOver || __privateGet(this, _openSubMenu) !== void 0 && entry.subMenu === __privateGet(this, _openSubMenu))) {
           ctx.fillStyle = Theme.ContextMenu.HighlightColor;
           ctx.beginPath();
           ctx.roundRect(
@@ -520,6 +538,9 @@ var _ContextMenu = class _ContextMenu {
           ctx.fill();
         }
         __privateGet(this, _textStyle2).setupStyle(ctx, menuScale);
+        if (itemDisabled) {
+          ctx.fillStyle = Theme.ContextMenu.DisabledFontColor;
+        }
         ctx.fillText(entry.text, position.x + scaledEntryHeight / 5, __privateGet(this, _tempBox).Position.y + scaledEntryHeight / 2);
         if (entry.subMenu !== void 0) {
           ctx.beginPath();
@@ -631,9 +652,13 @@ _openSubMenu = new WeakMap();
 var ContextMenu = _ContextMenu;
 
 // src/input.ts
-var _clicked, _lastTouch, _ele, _lastMousePosition, _dragCallback, _moveCallback, _clickStart, _clickStop, _contextMenu, _MouseObserver_instances, mousePosition_fn, move_fn, moveTouch_fn, down_fn, touchDown_fn, up_fn;
+var LONG_PRESS_MS = 500;
+var LONG_PRESS_SLOP = 12;
+var PINCH_SENSITIVITY = 50;
+var SUPPRESS_MOUSE_MS = 600;
+var _clicked, _lastTouch, _ele, _lastMousePosition, _dragCallback, _moveCallback, _clickStart, _clickStop, _contextMenu, _zoomCallback, _longPressTimer, _longPressOrigin, _longPressFired, _pinchDist, _lastTouchAt, _MouseObserver_instances, mousePos_fn, touchPos_fn, fromTouch_fn, clearLongPress_fn, wheel_fn, move_fn, down_fn, up_fn, touchStart_fn, touchMove_fn, touchEnd_fn;
 var MouseObserver = class {
-  constructor(ele, dragCallback, moveCallback, clickStart, clickStop, contextMenu, fileDrop) {
+  constructor(ele, dragCallback, moveCallback, clickStart, clickStop, contextMenu, fileDrop, zoomCallback) {
     __privateAdd(this, _MouseObserver_instances);
     __privateAdd(this, _clicked);
     __privateAdd(this, _lastTouch);
@@ -644,49 +669,55 @@ var MouseObserver = class {
     __privateAdd(this, _clickStart);
     __privateAdd(this, _clickStop);
     __privateAdd(this, _contextMenu);
+    __privateAdd(this, _zoomCallback);
+    __privateAdd(this, _longPressTimer, null);
+    __privateAdd(this, _longPressOrigin, Zero());
+    __privateAdd(this, _longPressFired, false);
+    __privateAdd(this, _pinchDist, 0);
+    __privateAdd(this, _lastTouchAt, 0);
     __privateSet(this, _ele, ele);
     __privateSet(this, _dragCallback, dragCallback);
     __privateSet(this, _moveCallback, moveCallback);
     __privateSet(this, _clickStart, clickStart);
     __privateSet(this, _clickStop, clickStop);
     __privateSet(this, _contextMenu, contextMenu);
+    __privateSet(this, _zoomCallback, zoomCallback);
     __privateSet(this, _clicked, false);
     __privateSet(this, _lastTouch, Zero());
     __privateSet(this, _lastMousePosition, Zero());
+    ele.style.touchAction = "none";
     ele.addEventListener("mousedown", __privateMethod(this, _MouseObserver_instances, down_fn).bind(this), false);
-    ele.addEventListener("touchstart", __privateMethod(this, _MouseObserver_instances, touchDown_fn).bind(this), false);
+    ele.addEventListener("touchstart", __privateMethod(this, _MouseObserver_instances, touchStart_fn).bind(this), { passive: false });
     document.addEventListener("mouseup", __privateMethod(this, _MouseObserver_instances, up_fn).bind(this), false);
-    document.addEventListener("touchend", __privateMethod(this, _MouseObserver_instances, up_fn).bind(this), false);
+    document.addEventListener("touchend", __privateMethod(this, _MouseObserver_instances, touchEnd_fn).bind(this), false);
+    document.addEventListener("touchcancel", __privateMethod(this, _MouseObserver_instances, touchEnd_fn).bind(this), false);
     ele.addEventListener("mousemove", __privateMethod(this, _MouseObserver_instances, move_fn).bind(this), false);
-    ele.addEventListener("touchmove", __privateMethod(this, _MouseObserver_instances, moveTouch_fn).bind(this), false);
+    ele.addEventListener("touchmove", __privateMethod(this, _MouseObserver_instances, touchMove_fn).bind(this), { passive: false });
+    ele.addEventListener("wheel", __privateMethod(this, _MouseObserver_instances, wheel_fn).bind(this), { passive: false });
     ele.addEventListener("drop", (ev) => {
       var _a;
       ev.preventDefault();
-      console.log(ev);
       if ((_a = ev.dataTransfer) == null ? void 0 : _a.items) {
         [...ev.dataTransfer.items].forEach((item, i) => {
           if (item.kind === "file") {
             const file = item.getAsFile();
             if (file) {
               fileDrop(file);
-              console.log(file);
-              console.log(`\u2026 file[${i}].name = ${file.name}`);
             }
           }
         });
-      } else if (ev.dataTransfer) {
-        [...ev.dataTransfer.files].forEach((file, i) => {
-          console.log(`\u2026 file[${i}].name = ${file.name}`);
-        });
       }
     });
     ele.addEventListener("dragover", (ev) => {
       ev.preventDefault();
-      __privateGet(this, _moveCallback).call(this, __privateMethod(this, _MouseObserver_instances, mousePosition_fn).call(this, ev));
+      __privateGet(this, _moveCallback).call(this, __privateMethod(this, _MouseObserver_instances, mousePos_fn).call(this, ev));
     });
     ele.addEventListener("contextmenu", (evt) => {
-      contextMenu(__privateMethod(this, _MouseObserver_instances, mousePosition_fn).call(this, evt));
       evt.preventDefault();
+      if (Date.now() - __privateGet(this, _lastTouchAt) < SUPPRESS_MOUSE_MS) {
+        return;
+      }
+      __privateGet(this, _contextMenu).call(this, __privateMethod(this, _MouseObserver_instances, mousePos_fn).call(this, evt));
     }, false);
   }
 };
@@ -699,16 +730,57 @@ _moveCallback = new WeakMap();
 _clickStart = new WeakMap();
 _clickStop = new WeakMap();
 _contextMenu = new WeakMap();
+_zoomCallback = new WeakMap();
+_longPressTimer = new WeakMap();
+_longPressOrigin = new WeakMap();
+_longPressFired = new WeakMap();
+_pinchDist = new WeakMap();
+_lastTouchAt = new WeakMap();
 _MouseObserver_instances = new WeakSet();
-mousePosition_fn = function(event) {
-  var rect = __privateGet(this, _ele).getBoundingClientRect();
+mousePos_fn = function(event) {
+  const rect = __privateGet(this, _ele).getBoundingClientRect();
   return {
     x: event.clientX - rect.left,
     y: event.clientY - rect.top
   };
 };
+touchPos_fn = function(touch) {
+  const rect = __privateGet(this, _ele).getBoundingClientRect();
+  return {
+    x: touch.clientX - rect.left,
+    y: touch.clientY - rect.top
+  };
+};
+fromTouch_fn = function() {
+  return Date.now() - __privateGet(this, _lastTouchAt) < SUPPRESS_MOUSE_MS;
+};
+clearLongPress_fn = function() {
+  if (__privateGet(this, _longPressTimer) !== null) {
+    clearTimeout(__privateGet(this, _longPressTimer));
+    __privateSet(this, _longPressTimer, null);
+  }
+};
+wheel_fn = function(event) {
+  event.preventDefault();
+  let dy = event.deltaY;
+  if (event.deltaMode === WheelEvent.DOM_DELTA_LINE) {
+    dy *= 16;
+  } else if (event.deltaMode === WheelEvent.DOM_DELTA_PAGE) {
+    dy *= __privateGet(this, _ele).clientHeight;
+  }
+  const amount = -dy / 100;
+  if (amount === 0) {
+    return;
+  }
+  const anchor = __privateMethod(this, _MouseObserver_instances, mousePos_fn).call(this, event);
+  __privateGet(this, _moveCallback).call(this, anchor);
+  __privateGet(this, _zoomCallback).call(this, amount, anchor);
+};
 move_fn = function(event) {
-  const pos = __privateMethod(this, _MouseObserver_instances, mousePosition_fn).call(this, event);
+  if (__privateMethod(this, _MouseObserver_instances, fromTouch_fn).call(this)) {
+    return;
+  }
+  const pos = __privateMethod(this, _MouseObserver_instances, mousePos_fn).call(this, event);
   if (__privateGet(this, _clicked)) {
     const delta = Zero();
     SubVector2(delta, pos, __privateGet(this, _lastMousePosition));
@@ -717,14 +789,80 @@ move_fn = function(event) {
   __privateGet(this, _moveCallback).call(this, pos);
   CopyVector2(__privateGet(this, _lastMousePosition), pos);
 };
-moveTouch_fn = function(event) {
-  const rect = __privateGet(this, _ele).getBoundingClientRect();
-  const pos = {
-    x: event.touches[0].clientX - rect.left,
-    y: event.touches[0].clientY - rect.top
-  };
+down_fn = function(event) {
+  if (event.button !== 0 || __privateMethod(this, _MouseObserver_instances, fromTouch_fn).call(this)) {
+    return;
+  }
+  __privateSet(this, _clicked, true);
+  __privateGet(this, _clickStart).call(this, __privateMethod(this, _MouseObserver_instances, mousePos_fn).call(this, event), event.ctrlKey || event.shiftKey);
+};
+up_fn = function(event) {
+  if (event.button !== 0 || __privateMethod(this, _MouseObserver_instances, fromTouch_fn).call(this)) {
+    return;
+  }
+  __privateSet(this, _clicked, false);
+  __privateGet(this, _clickStop).call(this);
+};
+touchStart_fn = function(event) {
+  __privateSet(this, _lastTouchAt, Date.now());
+  event.preventDefault();
+  if (event.touches.length >= 2) {
+    __privateMethod(this, _MouseObserver_instances, clearLongPress_fn).call(this);
+    __privateSet(this, _clicked, false);
+    __privateSet(this, _pinchDist, Distance(
+      __privateMethod(this, _MouseObserver_instances, touchPos_fn).call(this, event.touches[0]),
+      __privateMethod(this, _MouseObserver_instances, touchPos_fn).call(this, event.touches[1])
+    ));
+    return;
+  }
+  if (event.touches.length !== 1) {
+    return;
+  }
+  const pos = __privateMethod(this, _MouseObserver_instances, touchPos_fn).call(this, event.touches[0]);
+  CopyVector2(__privateGet(this, _longPressOrigin), pos);
+  CopyVector2(__privateGet(this, _lastTouch), pos);
+  __privateSet(this, _longPressFired, false);
+  __privateSet(this, _pinchDist, 0);
+  __privateMethod(this, _MouseObserver_instances, clearLongPress_fn).call(this);
+  const x = pos.x;
+  const y = pos.y;
+  __privateSet(this, _longPressTimer, setTimeout(() => {
+    __privateSet(this, _longPressTimer, null);
+    __privateSet(this, _longPressFired, true);
+    __privateSet(this, _clicked, false);
+    __privateGet(this, _clickStop).call(this);
+    __privateGet(this, _contextMenu).call(this, { x, y });
+  }, LONG_PRESS_MS));
+  __privateSet(this, _clicked, true);
   __privateGet(this, _moveCallback).call(this, pos);
-  if (__privateGet(this, _clicked)) {
+  __privateGet(this, _clickStart).call(this, pos, false);
+};
+touchMove_fn = function(event) {
+  __privateSet(this, _lastTouchAt, Date.now());
+  event.preventDefault();
+  if (event.touches.length >= 2) {
+    __privateMethod(this, _MouseObserver_instances, clearLongPress_fn).call(this);
+    __privateSet(this, _clicked, false);
+    const a = __privateMethod(this, _MouseObserver_instances, touchPos_fn).call(this, event.touches[0]);
+    const b = __privateMethod(this, _MouseObserver_instances, touchPos_fn).call(this, event.touches[1]);
+    const dist = Distance(a, b);
+    const anchor = { x: (a.x + b.x) / 2, y: (a.y + b.y) / 2 };
+    if (__privateGet(this, _pinchDist) > 0) {
+      __privateGet(this, _moveCallback).call(this, anchor);
+      __privateGet(this, _zoomCallback).call(this, (dist - __privateGet(this, _pinchDist)) / PINCH_SENSITIVITY, anchor);
+    }
+    __privateSet(this, _pinchDist, dist);
+    return;
+  }
+  if (event.touches.length !== 1) {
+    return;
+  }
+  const pos = __privateMethod(this, _MouseObserver_instances, touchPos_fn).call(this, event.touches[0]);
+  if (__privateGet(this, _longPressTimer) !== null && Distance(pos, __privateGet(this, _longPressOrigin)) > LONG_PRESS_SLOP) {
+    __privateMethod(this, _MouseObserver_instances, clearLongPress_fn).call(this);
+  }
+  __privateGet(this, _moveCallback).call(this, pos);
+  if (__privateGet(this, _clicked) && !__privateGet(this, _longPressFired)) {
     __privateGet(this, _dragCallback).call(this, {
       x: pos.x - __privateGet(this, _lastTouch).x,
       y: pos.y - __privateGet(this, _lastTouch).y
@@ -732,26 +870,19 @@ moveTouch_fn = function(event) {
   }
   CopyVector2(__privateGet(this, _lastTouch), pos);
 };
-down_fn = function(event) {
-  if (event.button !== 0) {
-    return;
-  }
-  __privateSet(this, _clicked, true);
-  __privateGet(this, _clickStart).call(this, __privateMethod(this, _MouseObserver_instances, mousePosition_fn).call(this, event), event.ctrlKey || event.shiftKey);
-};
-touchDown_fn = function(event) {
-  __privateSet(this, _clicked, true);
-  const rect = __privateGet(this, _ele).getBoundingClientRect();
-  __privateGet(this, _lastTouch).x = event.touches[0].clientX - rect.left;
-  __privateGet(this, _lastTouch).y = event.touches[0].clientY - rect.top;
-  __privateGet(this, _clickStart).call(this, __privateGet(this, _lastTouch), false);
-};
-up_fn = function(event) {
-  if (event.button !== 0) {
+touchEnd_fn = function(event) {
+  __privateSet(this, _lastTouchAt, Date.now());
+  __privateMethod(this, _MouseObserver_instances, clearLongPress_fn).call(this);
+  if (event.touches.length >= 1) {
+    __privateSet(this, _pinchDist, 0);
     return;
   }
+  __privateSet(this, _pinchDist, 0);
   __privateSet(this, _clicked, false);
-  __privateGet(this, _clickStop).call(this);
+  if (!__privateGet(this, _longPressFired)) {
+    __privateGet(this, _clickStop).call(this);
+  }
+  __privateSet(this, _longPressFired, false);
 };
 
 // src/elements/interfaces.ts
@@ -2731,6 +2862,12 @@ GlobalWidgetFactory.register("image", (node, config) => new ImageWidget(config))
 GlobalWidgetFactory.register("text", (node, config) => new TextWidget(node, config));
 
 // src/connection.ts
+var BACKWARD_PORT_STUB = 30;
+var BACKWARD_STUB_RAMP = 80;
+function smoothstep(t) {
+  const x = Clamp01(t);
+  return x * x * (3 - 2 * x);
+}
 function DefaultConnectionRenderer(connectionSize, connectionColor, mouseOverSize, mouseOverColor) {
   return (params) => {
     var _a, _b;
@@ -2754,10 +2891,26 @@ function DefaultConnectionRenderer(connectionSize, connectionColor, mouseOverSiz
     }
     params.ctx.strokeStyle = color;
     params.ctx.lineWidth = lineSize;
+    const inX = params.start.x;
+    const inY = params.start.y;
+    const outX = params.end.x;
+    const outY = params.end.y;
+    const overlap = outX - inX;
+    const fullStub = BACKWARD_PORT_STUB * params.graphScale;
+    const ramp = BACKWARD_STUB_RAMP * params.graphScale;
+    const stub = overlap <= 0 ? 0 : fullStub * smoothstep(overlap / ramp);
+    const curveStartX = inX - stub;
+    const curveEndX = outX + stub;
     params.ctx.beginPath();
-    params.ctx.moveTo(params.start.x, params.start.y);
-    const midX = (params.start.x + params.end.x) / 2;
-    params.ctx.bezierCurveTo(midX, params.start.y, midX, params.end.y, params.end.x, params.end.y);
+    params.ctx.moveTo(inX, inY);
+    if (stub > 0) {
+      params.ctx.lineTo(curveStartX, inY);
+    }
+    const midX = (curveStartX + curveEndX) / 2;
+    params.ctx.bezierCurveTo(midX, inY, midX, outY, curveEndX, outY);
+    if (stub > 0) {
+      params.ctx.lineTo(outX, outY);
+    }
     params.ctx.stroke();
     params.ctx.shadowBlur = 0;
   };
@@ -3245,7 +3398,7 @@ function BuildConnectionRenderer(config) {
     // config?.mouseOverColor === undefined ? "#00FF22" : config.mouseOverColor
   );
 }
-var _postProcessPass, _nodes, _connections2, _nodeHovering, _nodesGrabbed, _connectionSelected, _idleConnectionRenderer, _portHovering, _widgetHovering, _widgetCurrentlyClicking, _cursor, _nodeFactory, _boxSelect, _boxSelectStart_graphSpace, _boxSelectEnd_graphSpace, _boxSelectionNodes, _boxSelectStyle, _nodeRemovedCallbacks, _registeredNodeAddedCallbacks, _NodeSubsystem_instances, removeNodeConnections_fn, interactingWithNode_fn, interactingWithConnection_fn, interactingWithWidget_fn, removeNodeByIndex_fn, removeConnectionByIndex_fn, removeConnection_fn, nodesSelected_fn, organizeSelected_fn, selectInputNodesAndDescendents_fn, selectConnectedNodes_fn, selectNodeByIndex_fn, selectNode_fn, clearCurrentlySelectedConnection_fn, renderConnections_fn, renderNodes_fn, boxSelectionScreenspaceBox_fn;
+var _postProcessPass, _nodes, _connections2, _nodeHovering, _nodesGrabbed, _connectionSelected, _idleConnectionRenderer, _portHovering, _widgetHovering, _widgetCurrentlyClicking, _cursor, _nodeFactory, _boxSelect, _boxSelectStart_graphSpace, _boxSelectEnd_graphSpace, _boxSelectionNodes, _boxSelectStyle, _lastCtx, _nodeRemovedCallbacks, _registeredNodeAddedCallbacks, _NodeSubsystem_instances, removeNodeConnections_fn, interactingWithNode_fn, interactingWithConnection_fn, interactingWithWidget_fn, removeNodeByIndex_fn, removeConnectionByIndex_fn, removeConnection_fn, nodesSelected_fn, organizeSelected_fn, selectInputNodesAndDescendents_fn, selectConnectedNodes_fn, selectNodeByIndex_fn, selectNode_fn, clearCurrentlySelectedConnection_fn, renderConnections_fn, renderNodes_fn, boxSelectionScreenspaceBox_fn;
 var NodeSubsystem2 = class {
   // ========================================================================
   constructor(postProcessPass, config) {
@@ -3267,6 +3420,7 @@ var NodeSubsystem2 = class {
     __privateAdd(this, _boxSelectEnd_graphSpace);
     __privateAdd(this, _boxSelectionNodes);
     __privateAdd(this, _boxSelectStyle);
+    __privateAdd(this, _lastCtx);
     // LISTENERS ==============================================================
     __privateAdd(this, _nodeRemovedCallbacks);
     __privateAdd(this, _registeredNodeAddedCallbacks);
@@ -3288,6 +3442,7 @@ var NodeSubsystem2 = class {
     __privateSet(this, _boxSelectStart_graphSpace, Zero());
     __privateSet(this, _boxSelectEnd_graphSpace, Zero());
     __privateSet(this, _boxSelectionNodes, new List());
+    __privateSet(this, _lastCtx, null);
     __privateSet(this, _boxSelectStyle, new BoxStyle({
       border: {
         color: Theme.BoxSelect.Color,
@@ -3320,6 +3475,29 @@ var NodeSubsystem2 = class {
   }
   clickStart(mousePosition, camera, ctrlKey) {
     __privateSet(this, _boxSelect, false);
+    __privateGet(this, _nodesGrabbed).Clear();
+    if (__privateGet(this, _lastCtx) !== null) {
+      __privateSet(this, _portHovering, null);
+      __privateSet(this, _widgetHovering, null);
+      __privateSet(this, _nodeHovering, -1);
+      for (let i = 0; i < __privateGet(this, _nodes).length; i++) {
+        const intersection = __privateGet(this, _nodes)[i].inBounds(__privateGet(this, _lastCtx), camera, mousePosition);
+        if (intersection.Node !== void 0 && intersection.PortIndex === void 0 && intersection.Widget === void 0) {
+          __privateSet(this, _nodeHovering, i);
+        }
+        if (intersection.Widget !== void 0) {
+          __privateSet(this, _widgetHovering, intersection.Widget);
+        }
+        if (intersection.Port !== void 0 && intersection.Node !== void 0 && intersection.PortIndex !== void 0 && intersection.PortIsInput !== void 0) {
+          __privateSet(this, _portHovering, {
+            Index: intersection.PortIndex,
+            Node: intersection.Node,
+            Port: intersection.Port,
+            InputPort: intersection.PortIsInput
+          });
+        }
+      }
+    }
     let hoveringSomething = false;
     if (__privateGet(this, _nodeHovering) > -1) {
       __privateMethod(this, _NodeSubsystem_instances, selectNodeByIndex_fn).call(this, __privateGet(this, _nodeHovering), !ctrlKey);
@@ -3494,6 +3672,19 @@ var NodeSubsystem2 = class {
   getNodes() {
     return __privateGet(this, _nodes);
   }
+  /**
+   * Returns currently selected nodes in stable graph order (same selection
+   * state used by Ctrl+click and box-select styling via FlowNode.selected()).
+   */
+  getSelectedNodes() {
+    const selected = new Array();
+    for (let i = 0; i < __privateGet(this, _nodes).length; i++) {
+      if (__privateGet(this, _nodes)[i].selected()) {
+        selected.push(__privateGet(this, _nodes)[i]);
+      }
+    }
+    return selected;
+  }
   /**
    * Returns all nodes who are connected to the inputs of the 
    * node in question
@@ -3640,6 +3831,7 @@ var NodeSubsystem2 = class {
     return config;
   }
   render(ctx, camera, mousePosition) {
+    __privateSet(this, _lastCtx, ctx);
     __privateSet(this, _cursor, "default" /* Default */);
     TimeExecution("Render_Connections", () => {
       __privateMethod(this, _NodeSubsystem_instances, renderConnections_fn).call(this, ctx, camera, mousePosition);
@@ -3673,6 +3865,7 @@ _boxSelectStart_graphSpace = new WeakMap();
 _boxSelectEnd_graphSpace = new WeakMap();
 _boxSelectionNodes = new WeakMap();
 _boxSelectStyle = new WeakMap();
+_lastCtx = new WeakMap();
 _nodeRemovedCallbacks = new WeakMap();
 _registeredNodeAddedCallbacks = new WeakMap();
 _NodeSubsystem_instances = new WeakSet();
@@ -4329,42 +4522,44 @@ var FlowNode = class {
   // }
   calculateBounds(ctx, camera) {
     const tempMeasurement = Zero();
-    const doublePadding = __privateGet(this, _padding2) * 2;
+    const zoom = camera.zoom;
+    const scaledPadding = __privateGet(this, _padding2) * zoom;
+    const doubleScaledPadding = scaledPadding * 2;
+    const scaledElementSpacing = __privateGet(this, _elementSpacing) * zoom;
     const screenSpacePosition = Zero();
     camera.graphSpaceToScreenSpace(__privateGet(this, _position), screenSpacePosition);
     const size = Zero();
-    __privateGet(this, _title2).size(ctx, 1, size);
+    __privateGet(this, _title2).size(ctx, zoom, size);
     const subtitleSize = Zero();
-    __privateGet(this, _subTitle).size(ctx, 1, subtitleSize);
+    __privateGet(this, _subTitle).size(ctx, zoom, subtitleSize);
     size.x = Math.max(size.x, subtitleSize.x);
     if (__privateGet(this, _infoText) !== "") {
       size.x += size.y * 4;
     }
-    size.x += doublePadding;
-    size.y += doublePadding + __privateGet(this, _elementSpacing) * __privateGet(this, _input).length;
+    size.x += doubleScaledPadding;
+    size.y += doubleScaledPadding + scaledElementSpacing * __privateGet(this, _input).length;
     for (let i = 0; i < __privateGet(this, _input).length; i++) {
       const port = __privateGet(this, _input)[i];
-      __privateGet(this, _portTextStyle).measure(ctx, 1, port.getDisplayName(), tempMeasurement);
+      __privateGet(this, _portTextStyle).measure(ctx, zoom, port.getDisplayName(), tempMeasurement);
       size.y += tempMeasurement.y;
-      size.x = Math.max(size.x, tempMeasurement.x + doublePadding);
+      size.x = Math.max(size.x, tempMeasurement.x + doubleScaledPadding);
     }
-    size.y += __privateGet(this, _elementSpacing) * __privateGet(this, _output).length;
+    size.y += scaledElementSpacing * __privateGet(this, _output).length;
     for (let i = 0; i < __privateGet(this, _output).length; i++) {
       const port = __privateGet(this, _output)[i];
-      __privateGet(this, _portTextStyle).measure(ctx, 1, port.getDisplayName(), tempMeasurement);
+      __privateGet(this, _portTextStyle).measure(ctx, zoom, port.getDisplayName(), tempMeasurement);
       size.y += tempMeasurement.y;
-      size.x = Math.max(size.x, tempMeasurement.x + doublePadding);
+      size.x = Math.max(size.x, tempMeasurement.x + doubleScaledPadding);
     }
-    size.y += __privateGet(this, _elementSpacing) * __privateGet(this, _widgets).length;
+    size.y += scaledElementSpacing * __privateGet(this, _widgets).length;
     for (let i = 0; i < __privateGet(this, _widgets).length; i++) {
       const element = __privateGet(this, _widgets)[i];
       const eleSize = element.Size();
-      size.y += eleSize.y;
-      size.x = Math.max(size.x, eleSize.x + doublePadding);
+      size.y += eleSize.y * zoom;
+      size.x = Math.max(size.x, eleSize.x * zoom + doubleScaledPadding);
     }
-    size.y += __privateGet(this, _elementSpacing);
-    size.x = Math.max(size.x, MINIMUM_NODE_WIDTH);
-    ScaleVector(size, camera.zoom);
+    size.y += scaledElementSpacing;
+    size.x = Math.max(size.x, MINIMUM_NODE_WIDTH * zoom);
     return {
       Position: screenSpacePosition,
       Size: size
@@ -6324,9 +6519,9 @@ var NodeFlowGraph = class {
     __privateSet(this, _contextMenuConfig, CombineContextMenus({
       items: [
         {
-          name: "Reset View",
+          name: "Center on Graph",
           group: contextMenuGroup,
-          callback: __privateGet(this, _camera).reset.bind(__privateGet(this, _camera))
+          callback: this.centerOnGraph.bind(this)
         }
       ]
     }, config == null ? void 0 : config.contextMenu));
@@ -6346,21 +6541,19 @@ var NodeFlowGraph = class {
       __privateSet(this, _backgroundRenderer, BuildBackgroundRenderer(backgroundColor));
     }
     window.requestAnimationFrame(__privateMethod(this, _NodeFlowGraph_instances, render_fn).bind(this));
-    __privateGet(this, _canvas).addEventListener("wheel", (event) => {
-      event.preventDefault();
-      this.zoom(Math.sign(event.deltaY));
-    }, false);
     new MouseObserver(
       __privateGet(this, _canvas),
       __privateMethod(this, _NodeFlowGraph_instances, mouseDragEvent_fn).bind(this),
-      // Mouse move event
       (mousePosition) => {
         __privateSet(this, _mousePosition, mousePosition);
       },
       __privateMethod(this, _NodeFlowGraph_instances, clickStart_fn).bind(this),
       __privateMethod(this, _NodeFlowGraph_instances, clickEnd_fn).bind(this),
       __privateMethod(this, _NodeFlowGraph_instances, openContextMenu_fn).bind(this),
-      __privateMethod(this, _NodeFlowGraph_instances, fileDrop_fn).bind(this)
+      __privateMethod(this, _NodeFlowGraph_instances, fileDrop_fn).bind(this),
+      (amount, anchor) => {
+        this.zoom(amount, anchor);
+      }
     );
     document.addEventListener(
       "keydown",
@@ -6411,17 +6604,20 @@ var NodeFlowGraph = class {
   addNoteDragStopListener(callback) {
     __privateGet(this, _mainNoteSubsystem).addNoteDragStopListener(callback);
   }
-  zoom(amount) {
+  zoom(amount, anchor) {
+    const anchorPos = anchor != null ? anchor : __privateGet(this, _mousePosition);
     let oldPos = void 0;
-    if (__privateGet(this, _mousePosition)) {
-      oldPos = __privateMethod(this, _NodeFlowGraph_instances, sceenPositionToGraphPosition_fn).call(this, __privateGet(this, _mousePosition));
-      ;
+    if (anchorPos !== void 0) {
+      oldPos = __privateMethod(this, _NodeFlowGraph_instances, sceenPositionToGraphPosition_fn).call(this, anchorPos);
     }
     __privateGet(this, _camera).zoom += amount * __privateGet(this, _camera).zoom * 0.05;
-    if (!oldPos || !__privateGet(this, _mousePosition)) {
+    if (!oldPos || anchorPos === void 0) {
       return;
     }
-    const newPos = __privateMethod(this, _NodeFlowGraph_instances, sceenPositionToGraphPosition_fn).call(this, __privateGet(this, _mousePosition));
+    if (anchor !== void 0) {
+      __privateSet(this, _mousePosition, anchor);
+    }
+    const newPos = __privateMethod(this, _NodeFlowGraph_instances, sceenPositionToGraphPosition_fn).call(this, anchorPos);
     __privateGet(this, _camera).position.x += (newPos.x - oldPos.x) * __privateGet(this, _camera).zoom;
     __privateGet(this, _camera).position.y += (newPos.y - oldPos.y) * __privateGet(this, _camera).zoom;
   }
@@ -6437,6 +6633,60 @@ var NodeFlowGraph = class {
   getNodes() {
     return __privateGet(this, _mainNodeSubsystem).getNodes();
   }
+  /**
+   * Returns currently selected nodes in stable graph order (same selection
+   * state used by Ctrl+click and box-select styling via FlowNode.selected()).
+   */
+  getSelectedNodes() {
+    return __privateGet(this, _mainNodeSubsystem).getSelectedNodes();
+  }
+  /**
+   * Adjusts camera position and zoom so all nodes fit in view (~10% padding).
+   * Falls back to camera.reset() when there are no nodes.
+   */
+  centerOnGraph() {
+    const nodes = this.getNodes();
+    if (nodes.length === 0) {
+      __privateGet(this, _camera).reset();
+      return;
+    }
+    const measureCamera = new Camera();
+    let minX = Infinity;
+    let minY = Infinity;
+    let maxX = -Infinity;
+    let maxY = -Infinity;
+    for (let i = 0; i < nodes.length; i++) {
+      const bounds = nodes[i].calculateBounds(__privateGet(this, _ctx), measureCamera);
+      minX = Math.min(minX, bounds.Position.x);
+      minY = Math.min(minY, bounds.Position.y);
+      maxX = Math.max(maxX, bounds.Position.x + bounds.Size.x);
+      maxY = Math.max(maxY, bounds.Position.y + bounds.Size.y);
+    }
+    let width2 = maxX - minX;
+    let height2 = maxY - minY;
+    if (width2 <= 0 || height2 <= 0) {
+      __privateGet(this, _camera).reset();
+      return;
+    }
+    const padX = width2 * 0.05;
+    const padY = height2 * 0.05;
+    minX -= padX;
+    minY -= padY;
+    width2 += padX * 2;
+    height2 += padY * 2;
+    const canvasWidth = __privateGet(this, _canvas).clientWidth;
+    const canvasHeight = __privateGet(this, _canvas).clientHeight;
+    if (canvasWidth <= 0 || canvasHeight <= 0) {
+      __privateGet(this, _camera).reset();
+      return;
+    }
+    const zoom = Math.min(canvasWidth / width2, canvasHeight / height2);
+    const centerX = minX + width2 / 2;
+    const centerY = minY + height2 / 2;
+    __privateGet(this, _camera).zoom = zoom;
+    __privateGet(this, _camera).position.x = canvasWidth / 2 - centerX * zoom;
+    __privateGet(this, _camera).position.y = canvasHeight / 2 - centerY * zoom;
+  }
   connectedInputsNodeReferences(nodeIndex) {
     return __privateGet(this, _mainNodeSubsystem).connectedInputsNodeReferencesByIndex(nodeIndex);
   }
@@ -6539,21 +6789,6 @@ openContextMenu_fn = function(position) {
     Position: contextMenuPosition
   });
 };
-// Somethings wrong here. Needs more testing
-// #fitView(): void {
-//     if (this.#nodes.length === 0) {
-//         return;
-//     }
-//     const curBox: Box = {
-//         Position: { x: 0, y: 0 },
-//         Size: { x: 0, y: 0 }
-//     };
-//     CopyBox(curBox, this.#nodes[0].calculateBounds(this.#ctx, this.#graphState.position, this.#graphState.scale));
-//     for (let i = 1; i < this.#nodes.length; i++) {
-//         ExpandBox(curBox, this.#nodes[i].calculateBounds(this.#ctx, this.#graphState.position, this.#graphState.scale));
-//     }
-//     CopyVector2(this.#graphState.position, curBox.Position);
-// }
 clickEnd_fn = function() {
   this.currentView().clickEnd();
 };
@@ -6618,6 +6853,7 @@ renderQuickMenu_fn = function() {
 export {
   ButtonWidget,
   ColorWidget,
+  ContextMenuItemState,
   FlowNode,
   FlowNote,
   GlobalWidgetFactory,