@elicdavis/node-flow 0.1.16 → 0.1.18

package/dist/index.mjs

@@ -60,6 +60,14 @@ var Theme = {
     FontColor: "#afb9bb",
     DisabledFontColor: "#4a585c"
   },
+  Minimap: {
+    BackgroundColor: "rgba(10, 16, 18, 0.85)",
+    BorderColor: "#1c1c1c",
+    BorderRadius: 4,
+    Padding: 6,
+    NodeColor: "#6b7f85",
+    ViewportColor: "rgba(175, 185, 187, 0.25)"
+  },
   Note: {
     FontColor: "#afb9bb",
     FontSize: 16,
@@ -601,6 +609,43 @@ var ContextMenu = class _ContextMenu {
   }
 };
 
+// src/render_scheduler.ts
+var subscribers = /* @__PURE__ */ new Set();
+var frameQueued = false;
+var continuous = 0;
+var canSchedule = () => typeof requestAnimationFrame === "function";
+function onRenderRequested(redraw) {
+  subscribers.add(redraw);
+  return () => {
+    subscribers.delete(redraw);
+  };
+}
+function requestRender() {
+  if (frameQueued || !canSchedule()) {
+    return;
+  }
+  frameQueued = true;
+  requestAnimationFrame(() => {
+    frameQueued = false;
+    subscribers.forEach((redraw) => redraw());
+    if (continuous > 0) {
+      requestRender();
+    }
+  });
+}
+function renderContinuously() {
+  continuous++;
+  requestRender();
+  let released = false;
+  return () => {
+    if (released) {
+      return;
+    }
+    released = true;
+    continuous--;
+  };
+}
+
 // src/input.ts
 var LONG_PRESS_MS = 500;
 var LONG_PRESS_SLOP = 12;
@@ -634,15 +679,19 @@ var MouseObserver = class {
     this.#lastTouch = Zero();
     this.#lastMousePosition = Zero();
     ele.style.touchAction = "none";
-    ele.addEventListener("mousedown", this.#down.bind(this), false);
-    ele.addEventListener("touchstart", this.#touchStart.bind(this), { passive: false });
-    document.addEventListener("mouseup", this.#up.bind(this), false);
-    document.addEventListener("touchend", this.#touchEnd.bind(this), false);
-    document.addEventListener("touchcancel", this.#touchEnd.bind(this), false);
-    ele.addEventListener("mousemove", this.#move.bind(this), false);
-    ele.addEventListener("touchmove", this.#touchMove.bind(this), { passive: false });
-    ele.addEventListener("wheel", this.#wheel.bind(this), { passive: false });
-    ele.addEventListener("drop", (ev) => {
+    const redraws = (handler) => (event) => {
+      handler(event);
+      requestRender();
+    };
+    ele.addEventListener("mousedown", redraws(this.#down.bind(this)), false);
+    ele.addEventListener("touchstart", redraws(this.#touchStart.bind(this)), { passive: false });
+    document.addEventListener("mouseup", redraws(this.#up.bind(this)), false);
+    document.addEventListener("touchend", redraws(this.#touchEnd.bind(this)), false);
+    document.addEventListener("touchcancel", redraws(this.#touchEnd.bind(this)), false);
+    ele.addEventListener("mousemove", redraws(this.#move.bind(this)), false);
+    ele.addEventListener("touchmove", redraws(this.#touchMove.bind(this)), { passive: false });
+    ele.addEventListener("wheel", redraws(this.#wheel.bind(this)), { passive: false });
+    ele.addEventListener("drop", redraws((ev) => {
       ev.preventDefault();
       if (ev.dataTransfer?.items) {
         [...ev.dataTransfer.items].forEach((item, i) => {
@@ -654,18 +703,18 @@ var MouseObserver = class {
           }
         });
       }
-    });
-    ele.addEventListener("dragover", (ev) => {
+    }));
+    ele.addEventListener("dragover", redraws((ev) => {
       ev.preventDefault();
       this.#moveCallback(this.#mousePos(ev));
-    });
-    ele.addEventListener("contextmenu", (evt) => {
+    }));
+    ele.addEventListener("contextmenu", redraws((evt) => {
       evt.preventDefault();
       if (Date.now() - this.#lastTouchAt < SUPPRESS_MOUSE_MS) {
         return;
       }
       this.#contextMenu(this.#mousePos(evt));
-    }, false);
+    }), false);
   }
   #mousePos(event) {
     const rect = this.#ele.getBoundingClientRect();
@@ -762,6 +811,7 @@ var MouseObserver = class {
       this.#clicked = false;
       this.#clickStop();
       this.#contextMenu({ x, y });
+      requestRender();
     }, LONG_PRESS_MS);
     this.#clicked = true;
     this.#moveCallback(pos);
@@ -1198,6 +1248,7 @@ var Text = class _Text {
       if (!document.fonts.check(`16px "${this.#style.getFont()}"`)) {
         document.fonts.addEventListener("loadingdone", () => {
           this.#measured = false;
+          requestRender();
         });
       }
     }
@@ -1409,12 +1460,22 @@ function portsCompatible(a, b) {
   if (!a || !b) {
     return false;
   }
-  const left = a.acceptedTypes();
-  const right = b.acceptedTypes();
-  if (left.length === 0 || right.length === 0) {
+  return typeSetsCompatible(a.acceptedTypes(), b.acceptedTypes());
+}
+function typeSetsCompatible(a, b) {
+  if (a.length === 0 || b.length === 0) {
     return true;
   }
-  return left.some((type) => right.includes(type));
+  return a.some((type) => b.includes(type));
+}
+function portConfigTypes(config) {
+  if (config.anyType === true) {
+    return [];
+  }
+  if (config.acceptedTypes !== void 0 && config.acceptedTypes.length > 0) {
+    return config.acceptedTypes;
+  }
+  return [config.type === void 0 ? "" : config.type];
 }
 function fallbackColor(type, s) {
   let value = 0;
@@ -1529,6 +1590,7 @@ var Port = class {
       this.#filledStyle.fillColor = fallbackColor(this.#dataType, 1);
     }
     this.#dataTypePopupElement = this.#buildTooltip();
+    requestRender();
   }
   setDataType(type) {
     if (this.#dataType === type) {
@@ -1782,6 +1844,7 @@ var Popup = class {
   #buttonCSS;
   // Runtime ================================================================
   #popup;
+  #keyHandler;
   constructor(config) {
     this.#title = config.title;
     this.#options = config.options;
@@ -1789,14 +1852,25 @@ var Popup = class {
     this.#onClose = config.onClose;
     this.#buttonCSS = config.buttonCSS === void 0 ? "flex-grow: 1; margin-right: 8px;" : config.buttonCSS;
     this.#popup = null;
+    this.#keyHandler = null;
   }
   Hide() {
     if (this.#popup === null) {
       return;
     }
+    if (this.#keyHandler !== null) {
+      document.removeEventListener("keydown", this.#keyHandler, true);
+      this.#keyHandler = null;
+    }
     document.body.removeChild(this.#popup);
     this.#popup = null;
   }
+  #close(option) {
+    this.Hide();
+    if (this.#onClose !== void 0) {
+      this.#onClose(option);
+    }
+  }
   Show() {
     this.#popup = document.createElement("div");
     this.#popup.style.cssText = "position:absolute;top:0;width:100%;display:flex;height:100%;justify-content:center;align-items:center;background-color:#00000070;";
@@ -1818,14 +1892,20 @@ var Popup = class {
       const button = document.createElement("button");
       button.style.cssText = this.#buttonCSS;
       button.textContent = this.#options[i];
-      button.onclick = () => {
-        this.Hide();
-        if (this.#onClose !== void 0) {
-          this.#onClose(this.#options[i]);
-        }
-      };
+      button.onclick = () => this.#close(this.#options[i]);
       buttonContainer.appendChild(button);
     }
+    this.#keyHandler = (e) => {
+      if (e.key === "Enter") {
+        e.preventDefault();
+        this.#close(this.#options.length > 0 ? this.#options[0] : null);
+      } else if (e.key === "Escape") {
+        e.preventDefault();
+        this.#close(null);
+      }
+      e.stopPropagation();
+    };
+    document.addEventListener("keydown", this.#keyHandler, true);
   }
 };
 
@@ -1934,8 +2014,8 @@ var NumberWidget = class {
       },
       text: { color: Theme.Widget.FontColor }
     }));
-    this.#callback = config?.callback;
     this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, 0));
+    this.#callback = config?.callback;
     if (this.#nodeProperty !== void 0) {
       this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
         this.Set(newVal);
@@ -2377,8 +2457,8 @@ var StringWidget = class {
       },
       text: { color: Theme.Widget.FontColor }
     }));
-    this.#callback = config?.callback;
     this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, ""));
+    this.#callback = config?.callback;
     if (this.#nodeProperty !== void 0) {
       this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
         this.Set(newVal);
@@ -2543,8 +2623,8 @@ var ToggleWidget = class {
       lightBorderColor: config?.disabledStyle?.lightBorderColor,
       lightColor: config?.disabledStyle?.lightColor === void 0 ? "#004400" : config?.enabledStyle?.lightColor
     });
-    this.#callback = config?.callback;
     this.Set(startingWidgetValue(node, this.#nodeProperty, config?.value, false));
+    this.#callback = config?.callback;
     if (this.#nodeProperty !== void 0) {
       this.#node.addPropertyChangeListener(this.#nodeProperty, (oldVal, newVal) => {
         this.Set(newVal);
@@ -2607,6 +2687,7 @@ var ImageWidget = class {
     img.src = url;
     img.onload = () => {
       this.#image = img;
+      requestRender();
     };
     img.onerror = (event) => {
       console.log("error loading image:", url, event);
@@ -3187,6 +3268,13 @@ function TimeExecution(name, callback) {
 }
 
 // src/nodes/publisher.ts
+function offersMatchingPort(config, filter) {
+  const ports = filter.needs === "INPUT" /* Input */ ? config.inputs : config.outputs;
+  if (ports === void 0) {
+    return false;
+  }
+  return ports.some((port) => typeSetsCompatible(portConfigTypes(port), filter.types));
+}
 var Publisher = class {
   #name;
   #description;
@@ -3212,19 +3300,23 @@ var Publisher = class {
   unregister(nodeType) {
     return this.#registeredNodes.delete(nodeType);
   }
-  #recurseBuildMenu(graph, name, subMenu, position) {
+  #recurseBuildMenu(graph, name, subMenu, position, filter) {
     const items = [];
     const subMenus = /* @__PURE__ */ new Map();
     for (let [key, nodeConfig] of subMenu) {
       const slashIndex = key.indexOf("/");
       const bracketIndex = key.indexOf("[");
       if (slashIndex === -1 || bracketIndex !== -1 && bracketIndex < slashIndex) {
+        if (filter !== void 0 && !offersMatchingPort(nodeConfig, filter)) {
+          continue;
+        }
         items.push({
           name: key,
           callback: () => {
             const node = new FlowNode(nodeConfig);
             node.setPosition(position);
             graph.addNode(node);
+            filter?.onCreated?.(node);
           }
         });
       } else {
@@ -3239,7 +3331,11 @@ var Publisher = class {
     }
     const menus = [];
     for (let [key, nodes] of subMenus) {
-      menus.push(this.#recurseBuildMenu(graph, key, nodes, position));
+      const built = this.#recurseBuildMenu(graph, key, nodes, position, filter);
+      if (filter !== void 0 && built.items?.length === 0 && built.subMenus?.length === 0) {
+        continue;
+      }
+      menus.push(built);
     }
     return {
       name,
@@ -3247,8 +3343,8 @@ var Publisher = class {
       subMenus: menus
     };
   }
-  contextMenu(graph, position) {
-    return this.#recurseBuildMenu(graph, this.#name, this.#registeredNodes, position);
+  contextMenu(graph, position, filter) {
+    return this.#recurseBuildMenu(graph, this.#name, this.#registeredNodes, position, filter);
   }
   create(nodeType) {
     const config = this.#registeredNodes.get(nodeType);
@@ -3303,18 +3399,22 @@ var NodeFactory = class {
     }
     return node;
   }
-  newNodeSubmenus(graph, position) {
+  newNodeSubmenus(graph, position, filter) {
     const menus = [];
     for (let [_, publisher] of this.#registeredPublishers) {
-      menus.push(publisher.contextMenu(graph, position));
+      const built = publisher.contextMenu(graph, position, filter);
+      if (filter !== void 0 && built.items?.length === 0 && built.subMenus?.length === 0) {
+        continue;
+      }
+      menus.push(built);
     }
     return menus;
   }
-  openMenu(graph, position) {
+  openMenu(graph, position, filter) {
     return {
       name: "New Node",
       group: nodeFlowGroup,
-      subMenus: this.newNodeSubmenus(graph, position)
+      subMenus: this.newNodeSubmenus(graph, position, filter)
     };
   }
 };
@@ -3453,6 +3553,9 @@ var NodeSubsystem2 = class {
         CopyVector2(this.#boxSelectEnd_graphSpace, this.#boxSelectStart_graphSpace);
         this.#boxSelect = true;
       }
+      if (!hoveringSomething && !ctrlKey) {
+        this.unselectAllNodes();
+      }
       return hoveringSomething || ctrlKey;
     }
     if (this.#portHovering.InputPort) {
@@ -3512,6 +3615,102 @@ var NodeSubsystem2 = class {
       }
     }
   }
+  connectionsWithin(nodes) {
+    const within = [];
+    for (const connection of this.#connections) {
+      const outNode = connection.outNode();
+      const inNode = connection.inNode();
+      if (outNode === null || inNode === null) {
+        continue;
+      }
+      const from = nodes.indexOf(outNode);
+      const to = nodes.indexOf(inNode);
+      if (from === -1 || to === -1) {
+        continue;
+      }
+      const outPort = connection.outPort();
+      const inPort = connection.inPort();
+      if (outPort === null || inPort === null) {
+        continue;
+      }
+      within.push({
+        fromNode: from,
+        fromPort: this.#outputPortIndex(outNode, outPort),
+        toNode: to,
+        toPort: this.#inputPortIndex(inNode, inPort)
+      });
+    }
+    return within;
+  }
+  #onConnectionReleased = null;
+  setConnectionReleasedHandler(handler) {
+    this.#onConnectionReleased = handler;
+  }
+  #describeDanglingConnection(conn) {
+    const outNode = conn.outNode();
+    const inNode = conn.inNode();
+    if (outNode !== null && inNode === null) {
+      const from = conn.outPort();
+      if (from === null) {
+        return null;
+      }
+      const fromIndex = this.#outputPortIndex(outNode, from);
+      return {
+        needs: "INPUT" /* Input */,
+        types: from.acceptedTypes(),
+        connectTo: (node) => {
+          const to = this.#firstCompatiblePort(node, "INPUT" /* Input */, from);
+          if (to !== -1 && fromIndex !== -1) {
+            this.connectNodes(outNode, fromIndex, node, to);
+          }
+        }
+      };
+    }
+    if (inNode !== null && outNode === null) {
+      const to = conn.inPort();
+      if (to === null) {
+        return null;
+      }
+      const toIndex = this.#inputPortIndex(inNode, to);
+      return {
+        needs: "OUTPUT" /* Output */,
+        types: to.acceptedTypes(),
+        connectTo: (node) => {
+          const from = this.#firstCompatiblePort(node, "OUTPUT" /* Output */, to);
+          if (from !== -1 && toIndex !== -1) {
+            this.connectNodes(node, from, inNode, toIndex);
+          }
+        }
+      };
+    }
+    return null;
+  }
+  #outputPortIndex(node, port) {
+    for (let i = 0; i < node.outputs(); i++) {
+      if (node.outputPort(i) === port) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  #inputPortIndex(node, port) {
+    for (let i = 0; i < node.inputs(); i++) {
+      if (node.inputPort(i) === port) {
+        return i;
+      }
+    }
+    return -1;
+  }
+  #firstCompatiblePort(node, side, against) {
+    const count = side === "INPUT" /* Input */ ? node.inputs() : node.outputs();
+    for (let i = 0; i < count; i++) {
+      const port = side === "INPUT" /* Input */ ? node.inputPort(i) : node.outputPort(i);
+      if (portsCompatible(port, against)) {
+        return i;
+      }
+    }
+    return -1;
+  }
   clickEnd() {
     for (let i = 0; i < this.#nodesGrabbed.Count(); i++) {
       const node = this.#nodes[this.#nodesGrabbed.At(i)];
@@ -3526,14 +3725,20 @@ var NodeSubsystem2 = class {
       this.#boxSelect = false;
     }
     if (this.#widgetCurrentlyClicking !== null) {
-      this.#widgetCurrentlyClicking.ClickEnd();
+      if (this.#widgetHovering === this.#widgetCurrentlyClicking) {
+        this.#widgetCurrentlyClicking.ClickEnd();
+      }
       this.#widgetCurrentlyClicking = null;
     }
     if (this.#connectionSelected === null) {
       return;
     }
     if (this.#portHovering === null) {
+      const dangling = this.#describeDanglingConnection(this.#connectionSelected);
       this.#clearCurrentlySelectedConnection();
+      if (dangling !== null) {
+        this.#onConnectionReleased?.(dangling);
+      }
       return;
     }
     const port = this.#portHovering.Port;
@@ -3600,6 +3805,7 @@ var NodeSubsystem2 = class {
       this.#idleConnectionRenderer
     );
     this.#connections.push(connection);
+    requestRender();
     return connection;
   }
   getNodes() {
@@ -3660,6 +3866,7 @@ var NodeSubsystem2 = class {
   }
   addNode(node) {
     this.#nodes.push(node);
+    requestRender();
     for (let i = 0; i < this.#registeredNodeAddedCallbacks.length; i++) {
       const callback = this.#registeredNodeAddedCallbacks[i];
       if (!callback) {
@@ -3706,6 +3913,7 @@ var NodeSubsystem2 = class {
     this.#removeNodeConnections(nodeIndex);
     const node = this.#nodes[nodeIndex];
     this.#nodes.splice(nodeIndex, 1);
+    requestRender();
     for (let i = 0; i < this.#nodeRemovedCallbacks.length; i++) {
       this.#nodeRemovedCallbacks[i](node);
     }
@@ -3715,6 +3923,7 @@ var NodeSubsystem2 = class {
       this.#connections[index].clearPorts();
     }
     this.#connections.splice(index, 1);
+    requestRender();
   }
   #removeConnection(connection, clearPorts) {
     const index = this.#connections.indexOf(connection);
@@ -3760,7 +3969,8 @@ var NodeSubsystem2 = class {
         this.#nodeFactory.openMenu(this, position)
       ]
     };
-    if (this.#nodesSelected().length > 0) {
+    const selectedCount = this.#nodesSelected().length;
+    if (selectedCount > 0) {
       organizeNodesSubMenu.items?.push({
         name: "Selected Nodes",
         group: nodeFlowGroup,
@@ -3768,6 +3978,13 @@ var NodeSubsystem2 = class {
           this.#organizeSelected(ctx);
         }
       });
+      config.items?.push({
+        name: selectedCount === 1 ? "Delete Selected Node" : `Delete ${selectedCount} Selected Nodes`,
+        group: nodeFlowGroup,
+        callback: () => {
+          this.removeSelectedNodes();
+        }
+      });
     }
     if (this.#nodeHovering > -1) {
       const nodeToReview = this.#nodeHovering;
@@ -3841,6 +4058,29 @@ var NodeSubsystem2 = class {
       this.#selectNode(inputs[i], false);
     }
   }
+  /** Drops the selection entirely. */
+  unselectAllNodes() {
+    let changed = false;
+    for (let i = 0; i < this.#nodes.length; i++) {
+      if (this.#nodes[i].selected()) {
+        this.#nodes[i].unselect();
+        changed = true;
+      }
+    }
+    if (changed) {
+      requestRender();
+    }
+  }
+  /**
+   * Removes every selected node, and the connections that touched them.
+   */
+  removeSelectedNodes() {
+    const removed = this.getSelectedNodes();
+    for (const node of removed) {
+      this.removeNode(node);
+    }
+    return removed;
+  }
   #selectNodeByIndex(nodeIndex, unselectOthers) {
     this.#selectNode(this.#nodes[nodeIndex], unselectOthers);
   }
@@ -3878,8 +4118,16 @@ var NodeSubsystem2 = class {
     this.#nodeHovering = -1;
     this.#boxSelectionNodes.Clear();
     const selectedBox_Screenspace = this.#boxSelectionScreenspaceBox(camera);
+    const canvas = {
+      Position: { x: 0, y: 0 },
+      Size: { x: ctx.canvas.width, y: ctx.canvas.height }
+    };
     for (let i = 0; i < this.#nodes.length; i++) {
       let state = 0 /* Idle */;
+      const nodeBounds = this.#nodes[i].calculateBounds(ctx, camera);
+      if (!BoxIntersection(nodeBounds, canvas) && this.#nodes[i].layoutPortsWithoutDrawing(nodeBounds, camera.zoom)) {
+        continue;
+      }
       if (mousePosition !== void 0 && !this.#boxSelect) {
         const intersection = this.#nodes[i].inBounds(ctx, camera, mousePosition);
         if (intersection.Node !== void 0 && intersection.PortIndex === void 0 && intersection.Widget === void 0) {
@@ -3900,8 +4148,8 @@ var NodeSubsystem2 = class {
           };
         }
       } else if (this.#boxSelect) {
-        const nodeBounds = this.#nodes[i].calculateBounds(ctx, camera);
-        if (BoxIntersection(selectedBox_Screenspace, nodeBounds)) {
+        const nodeBounds2 = this.#nodes[i].calculateBounds(ctx, camera);
+        if (BoxIntersection(selectedBox_Screenspace, nodeBounds2)) {
           state = 1 /* MouseOver */;
           this.#boxSelectionNodes.Push(i);
         }
@@ -3923,12 +4171,16 @@ var NodeSubsystem2 = class {
   render(ctx, camera, mousePosition) {
     this.#lastCtx = ctx;
     this.#cursor = "default" /* Default */;
+    const awaitingLayout = this.#nodes.some((node) => !node.hasBeenLaidOut());
     TimeExecution("Render_Connections", () => {
       this.#renderConnections(ctx, camera, mousePosition);
     });
     TimeExecution("Render_Nodes", () => {
       this.#renderNodes(ctx, camera, mousePosition);
     });
+    if (awaitingLayout) {
+      requestRender();
+    }
     if (this.#boxSelect) {
       const box = this.#boxSelectionScreenspaceBox(camera);
       ctx.setLineDash([Theme.BoxSelect.LineDashLength]);
@@ -4204,6 +4456,7 @@ var FlowNode = class {
       return;
     }
     this.#selected = true;
+    requestRender();
     for (let i = 0; i < this.#onSelect.length; i++) {
       this.#onSelect[i]();
     }
@@ -4249,6 +4502,7 @@ var FlowNode = class {
       return;
     }
     this.#data[name] = value;
+    requestRender();
     for (let i = 0; i < this.#registeredAnyPropertyChangeCallbacks.length; i++) {
       this.#registeredAnyPropertyChangeCallbacks[i](name, oldValue, value);
     }
@@ -4509,6 +4763,7 @@ var FlowNode = class {
       return;
     }
     this.#selected = false;
+    requestRender();
     for (let i = 0; i < this.#onUnselect.length; i++) {
       this.#onUnselect[i]();
     }
@@ -4538,6 +4793,7 @@ var FlowNode = class {
   }
   setPosition(position) {
     CopyVector2(this.#position, position);
+    requestRender();
   }
   getPosition() {
     return this.#position;
@@ -4600,10 +4856,12 @@ var FlowNode = class {
   }
   addWidget(widget) {
     this.#widgets.push(widget);
+    requestRender();
   }
   insertWidget(index, widget) {
     const at = Math.max(0, Math.min(index, this.#widgets.length));
     this.#widgets.splice(at, 0, widget);
+    requestRender();
   }
   removeWidget(widget) {
     const index = this.#widgets.indexOf(widget, 0);
@@ -4611,12 +4869,15 @@ var FlowNode = class {
       throw new Error("node does not contain widget");
     }
     this.#widgets.splice(index, 1);
+    requestRender();
   }
   removeWidgetAt(index) {
     if (index < 0 || index >= this.#widgets.length) {
       return void 0;
     }
-    return this.#widgets.splice(index, 1)[0];
+    const removed = this.#widgets.splice(index, 1)[0];
+    requestRender();
+    return removed;
   }
   moveWidget(from, to) {
     if (from < 0 || from >= this.#widgets.length) {
@@ -4627,9 +4888,11 @@ var FlowNode = class {
     }
     const [widget] = this.#widgets.splice(from, 1);
     this.#widgets.splice(to, 0, widget);
+    requestRender();
   }
   clearWidgets() {
     this.#widgets.length = 0;
+    requestRender();
   }
   getWidget(index) {
     return this.#widgets[index];
@@ -4701,6 +4964,7 @@ var FlowNode = class {
       return;
     }
     this.#title.set(cleaned);
+    requestRender();
     for (let i = 0; i < this.#titleChangeCallback.length; i++) {
       const callback = this.#titleChangeCallback[i];
       callback(this, old, cleaned);
@@ -4719,6 +4983,7 @@ var FlowNode = class {
     }
     const old = this.#infoText;
     this.#infoText = cleaned;
+    requestRender();
     for (let i = 0; i < this.#infoChangeCallback.length; i++) {
       const callback = this.#infoChangeCallback[i];
       callback(this, old, cleaned);
@@ -4758,7 +5023,12 @@ var FlowNode = class {
   clearMessages() {
     this.#messages = [];
   }
+  hasBeenLaidOut() {
+    return this.#laidOut;
+  }
+  #laidOut = false;
   render(ctx, camera, state, mousePosition, postProcess) {
+    this.#laidOut = true;
     VectorPool.run(() => {
       const tempMeasurement = VectorPool.get();
       this.#inputPortPositions.Clear();
@@ -4894,8 +5164,58 @@ var FlowNode = class {
         const message = this.#messages[i];
         messageStart.y += message.render(ctx, camera.zoom, messageStart, !(state === 0 /* Idle */)) + 10 * camera.zoom;
       }
+      this.#rememberPortOffsets(nodeBounds, camera.zoom);
     });
   }
+  #portOffsets = { input: [], output: [] };
+  #rememberPortOffsets(bounds, zoom) {
+    if (zoom <= 0) {
+      return;
+    }
+    const record = (positions, into) => {
+      into.length = 0;
+      for (let i = 0; i < positions.Count(); i++) {
+        const box = positions.At(i);
+        into.push({
+          Position: {
+            x: (box.Position.x - bounds.Position.x) / zoom,
+            y: (box.Position.y - bounds.Position.y) / zoom
+          },
+          Size: {
+            x: box.Size.x / zoom,
+            y: box.Size.y / zoom
+          }
+        });
+      }
+    };
+    record(this.#inputPortPositions, this.#portOffsets.input);
+    record(this.#outputPortPositions, this.#portOffsets.output);
+  }
+  layoutPortsWithoutDrawing(bounds, zoom) {
+    if (this.#portOffsets.input.length === 0 && this.#portOffsets.output.length === 0) {
+      return false;
+    }
+    const project = (offsets, into) => {
+      into.Clear();
+      for (let i = 0; i < offsets.length; i++) {
+        const offset = offsets[i];
+        into.Push({
+          Position: {
+            x: bounds.Position.x + offset.Position.x * zoom,
+            y: bounds.Position.y + offset.Position.y * zoom
+          },
+          Size: {
+            x: offset.Size.x * zoom,
+            y: offset.Size.y * zoom
+          }
+        });
+      }
+    };
+    project(this.#portOffsets.input, this.#inputPortPositions);
+    project(this.#portOffsets.output, this.#outputPortPositions);
+    this.#widgetPositions.Clear();
+    return true;
+  }
 };
 
 // src/markdown/token.ts
@@ -5036,7 +5356,10 @@ function onFontsLoaded(callback) {
   if (typeof document === "undefined" || document.fonts === void 0) {
     return;
   }
-  document.fonts.addEventListener("loadingdone", () => callback());
+  document.fonts.addEventListener("loadingdone", () => {
+    callback();
+    requestRender();
+  });
 }
 var CodeBlockEntry = class {
   #text;
@@ -5786,6 +6109,7 @@ var NoteSubsystem = class {
       return;
     }
     this.#notes.push(note);
+    requestRender();
     for (let i = 0; i < this.#onNoteAddedCallbacks.length; i++) {
       this.#onNoteAddedCallbacks[i](note);
     }
@@ -5908,6 +6232,7 @@ var NoteSubsystem = class {
     if (index > -1) {
       const noteRemoved = this.#notes[index];
       this.#notes.splice(index, 1);
+      requestRender();
       for (let i = 0; i < this.#onNoteRemovedCallbacks.length; i++) {
         this.#onNoteRemovedCallbacks[i](noteRemoved);
       }
@@ -6244,6 +6569,124 @@ var QuickMenu = class {
   }
 };
 
+// src/minimap.ts
+var Minimap = class {
+  #enabled;
+  #width;
+  #height;
+  #margin;
+  #backgroundColor;
+  #borderColor;
+  #nodeColor;
+  #viewportColor;
+  #box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
+  #scale = 1;
+  #originX = 0;
+  #originY = 0;
+  // The padding the last frame was laid out with, so a click maps back
+  // through the same geometry it was drawn with.
+  #padding = Theme.Minimap.Padding;
+  #drawn = false;
+  constructor(config) {
+    this.#enabled = config?.enabled === true;
+    this.#width = config?.width === void 0 ? 200 : config.width;
+    this.#height = config?.height === void 0 ? 150 : config.height;
+    this.#margin = config?.margin === void 0 ? 16 : config.margin;
+    this.#backgroundColor = config?.backgroundColor;
+    this.#borderColor = config?.borderColor;
+    this.#nodeColor = config?.nodeColor;
+    this.#viewportColor = config?.viewportColor;
+  }
+  enabled() {
+    return this.#enabled;
+  }
+  setEnabled(enabled) {
+    this.#enabled = enabled;
+    this.#drawn = false;
+  }
+  contains(position) {
+    return this.#enabled && this.#drawn && InBox(this.#box, position);
+  }
+  graphPositionOf(position, out) {
+    out.x = (position.x - this.#box.Position.x - this.#padding) / this.#scale + this.#originX;
+    out.y = (position.y - this.#box.Position.y - this.#padding) / this.#scale + this.#originY;
+  }
+  render(ctx, canvas, camera, nodes) {
+    if (!this.#enabled) {
+      this.#drawn = false;
+      return;
+    }
+    const flat = new Camera();
+    let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+    const boxes = [];
+    for (let i = 0; i < nodes.length; i++) {
+      const bounds = nodes[i].calculateBounds(ctx, flat);
+      boxes.push(bounds);
+      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);
+    }
+    const topLeft = { x: 0, y: 0 };
+    const bottomRight = { x: 0, y: 0 };
+    camera.screenSpaceToGraphSpace({ x: 0, y: 0 }, topLeft);
+    camera.screenSpaceToGraphSpace({ x: canvas.width, y: canvas.height }, bottomRight);
+    minX = Math.min(minX, topLeft.x);
+    minY = Math.min(minY, topLeft.y);
+    maxX = Math.max(maxX, bottomRight.x);
+    maxY = Math.max(maxY, bottomRight.y);
+    if (!isFinite(minX) || maxX <= minX || maxY <= minY) {
+      this.#drawn = false;
+      return;
+    }
+    this.#box.Size.x = this.#width;
+    this.#box.Size.y = this.#height;
+    this.#box.Position.x = canvas.width - this.#width - this.#margin;
+    this.#box.Position.y = canvas.height - this.#height - this.#margin;
+    this.#padding = Theme.Minimap.Padding;
+    const usableWidth = this.#width - this.#padding * 2;
+    const usableHeight = this.#height - this.#padding * 2;
+    this.#scale = Math.min(usableWidth / (maxX - minX), usableHeight / (maxY - minY));
+    this.#originX = minX;
+    this.#originY = minY;
+    const left = this.#box.Position.x + this.#padding;
+    const top = this.#box.Position.y + this.#padding;
+    const toMapX = (x) => left + (x - minX) * this.#scale;
+    const toMapY = (y) => top + (y - minY) * this.#scale;
+    ctx.fillStyle = this.#backgroundColor ?? Theme.Minimap.BackgroundColor;
+    ctx.strokeStyle = this.#borderColor ?? Theme.Minimap.BorderColor;
+    ctx.lineWidth = 1;
+    ctx.beginPath();
+    ctx.roundRect(
+      this.#box.Position.x,
+      this.#box.Position.y,
+      this.#width,
+      this.#height,
+      Theme.Minimap.BorderRadius
+    );
+    ctx.fill();
+    ctx.stroke();
+    ctx.fillStyle = this.#nodeColor ?? Theme.Minimap.NodeColor;
+    for (let i = 0; i < boxes.length; i++) {
+      const b = boxes[i];
+      ctx.fillRect(
+        toMapX(b.Position.x),
+        toMapY(b.Position.y),
+        Math.max(1, b.Size.x * this.#scale),
+        Math.max(1, b.Size.y * this.#scale)
+      );
+    }
+    ctx.fillStyle = this.#viewportColor ?? Theme.Minimap.ViewportColor;
+    ctx.fillRect(
+      toMapX(topLeft.x),
+      toMapY(topLeft.y),
+      Math.max(1, (bottomRight.x - topLeft.x) * this.#scale),
+      Math.max(1, (bottomRight.y - topLeft.y) * this.#scale)
+    );
+    this.#drawn = true;
+  }
+};
+
 // src/graph.ts
 function BuildBackgroundRenderer(backgroundColor) {
   return (canvas, context, position, scale) => {
@@ -6381,7 +6824,13 @@ var NodeFlowGraph = class {
       const backgroundColor = config?.backgroundColor === void 0 ? Theme.Graph.BackgroundColor : config.backgroundColor;
       this.#backgroundRenderer = BuildBackgroundRenderer(backgroundColor);
     }
-    window.requestAnimationFrame(this.#render.bind(this));
+    this.#minimap = new Minimap(config?.minimap);
+    this.#mainNodeSubsystem.setConnectionReleasedHandler((dangling) => {
+      this.#openScopedMenu(dangling);
+    });
+    this.#watchCanvasSize();
+    this.#stopRendering = onRenderRequested(this.#render.bind(this));
+    requestRender();
     new MouseObserver(
       this.#canvas,
       this.#mouseDragEvent.bind(this),
@@ -6399,39 +6848,90 @@ var NodeFlowGraph = class {
     document.addEventListener(
       "keydown",
       (e) => {
-        if (document.activeElement) {
-          if (["INPUT", "TEXTAREA"].includes(document.activeElement.tagName)) return;
-        }
-        if (this.#openQuickMenu) {
-          if (e.code === "Escape") {
-            this.#openQuickMenu = null;
-            return;
-          }
-          if (e.code === "Enter") {
-            this.#openQuickMenu.Menu.execute();
-            this.#openQuickMenu = null;
-            return;
-          }
-          this.#openQuickMenu.Menu.keyboardEvent(e);
+        this.#keyDown(e);
+        requestRender();
+      }
+    );
+  }
+  #copyCallbacks = [];
+  #pasteCallbacks = [];
+  addCopyListener(callback) {
+    this.#copyCallbacks.push(callback);
+  }
+  addPasteListener(callback) {
+    this.#pasteCallbacks.push(callback);
+  }
+  #raiseCopy() {
+    const nodes = this.#mainNodeSubsystem.getSelectedNodes();
+    if (nodes.length === 0) {
+      return;
+    }
+    const connections = this.#mainNodeSubsystem.connectionsWithin(nodes);
+    this.#copyCallbacks.forEach((callback) => callback(nodes, connections));
+  }
+  #raisePaste() {
+    const position = this.#mousePosition === void 0 ? { x: 0, y: 0 } : this.#sceenPositionToGraphPosition(this.#mousePosition);
+    this.#pasteCallbacks.forEach((callback) => callback(position));
+  }
+  #deleteKey(e) {
+    return e.code === "Delete" || e.code === "Backspace" || e.key === "Delete" || e.key === "Backspace";
+  }
+  #keyDown(e) {
+    if (document.activeElement) {
+      if (["INPUT", "TEXTAREA"].includes(document.activeElement.tagName)) return;
+    }
+    if (this.#deleteKey(e)) {
+      if (this.#mainNodeSubsystem.getSelectedNodes().length > 0) {
+        e.preventDefault();
+        this.#mainNodeSubsystem.removeSelectedNodes();
+        return;
+      }
+    }
+    if (e.ctrlKey || e.metaKey) {
+      const letter = e.code.startsWith("Key") ? e.code.substring(3).toLowerCase() : (e.key ?? "").toLowerCase();
+      switch (letter) {
+        case "c":
+          this.#raiseCopy();
           return;
-        }
-        const spacePressed = e.key == " " || e.code == "Space";
-        if (!spacePressed) {
+        case "v":
+          this.#raisePaste();
           return;
-        }
-        if (!this.#mousePosition) {
+        // duplicate
+        case "d":
+          e.preventDefault();
+          this.#raiseCopy();
+          this.#raisePaste();
           return;
-        }
-        const contextMenuPosition = this.#sceenPositionToGraphPosition(this.#mousePosition);
-        let items = this.#mainNodeSubsystem.nodeFactory().newNodeSubmenus(this.#mainNodeSubsystem, contextMenuPosition);
-        this.#openQuickMenu = {
-          Menu: new QuickMenu({
-            subMenus: items
-          }),
-          Position: contextMenuPosition
-        };
       }
-    );
+    }
+    if (this.#openQuickMenu) {
+      if (e.code === "Escape") {
+        this.#openQuickMenu = null;
+        return;
+      }
+      if (e.code === "Enter") {
+        this.#openQuickMenu.Menu.execute();
+        this.#openQuickMenu = null;
+        return;
+      }
+      this.#openQuickMenu.Menu.keyboardEvent(e);
+      return;
+    }
+    const spacePressed = e.key == " " || e.code == "Space";
+    if (!spacePressed) {
+      return;
+    }
+    if (!this.#mousePosition) {
+      return;
+    }
+    const contextMenuPosition = this.#sceenPositionToGraphPosition(this.#mousePosition);
+    let items = this.#mainNodeSubsystem.nodeFactory().newNodeSubmenus(this.#mainNodeSubsystem, contextMenuPosition);
+    this.#openQuickMenu = {
+      Menu: new QuickMenu({
+        subMenus: items
+      }),
+      Position: contextMenuPosition
+    };
   }
   #fileDrop(file) {
     if (this.currentView().fileDrop(file)) {
@@ -6497,8 +6997,25 @@ var NodeFlowGraph = class {
     this.#openQuickMenu = null;
     this.#contextMenuEntryHovering = null;
     this.#mousePosition = mousePosition;
+    if (this.#minimap.contains(mousePosition)) {
+      this.#lookAtFromMinimap(mousePosition);
+      this.#draggingMinimap = true;
+      return;
+    }
     this.currentView().clickStart(mousePosition, this.#camera, ctrlKey);
   }
+  #draggingMinimap = false;
+  #lookAtFromMinimap(mousePosition) {
+    const target = { x: 0, y: 0 };
+    this.#minimap.graphPositionOf(mousePosition, target);
+    this.#camera.position.x = -(target.x * this.#camera.zoom) + this.#canvas.width / 2;
+    this.#camera.position.y = -(target.y * this.#camera.zoom) + this.#canvas.height / 2;
+    requestRender();
+  }
+  /** The minimap, so it can be turned on and sized by the host. */
+  minimap() {
+    return this.#minimap;
+  }
   currentView() {
     return this.#views[this.#currentView];
   }
@@ -6518,6 +7035,12 @@ var NodeFlowGraph = class {
   getSelectedNodes() {
     return this.#mainNodeSubsystem.getSelectedNodes();
   }
+  unselectAllNodes() {
+    this.#mainNodeSubsystem.unselectAllNodes();
+  }
+  removeSelectedNodes() {
+    return this.#mainNodeSubsystem.removeSelectedNodes();
+  }
   /**
    * Returns a copy of the current camera orientation (screen-space pan + zoom).
    */
@@ -6633,10 +7156,37 @@ var NodeFlowGraph = class {
       Position: contextMenuPosition
     };
   }
+  #openScopedMenu(dangling) {
+    if (this.#mousePosition === void 0) {
+      return;
+    }
+    const position = this.#sceenPositionToGraphPosition(this.#mousePosition);
+    const menu = this.#mainNodeSubsystem.nodeFactory().openMenu(
+      this.#mainNodeSubsystem,
+      position,
+      {
+        needs: dangling.needs,
+        types: dangling.types,
+        onCreated: dangling.connectTo
+      }
+    );
+    this.#openedContextMenu = {
+      Menu: new ContextMenu(menu),
+      Position: position
+    };
+    requestRender();
+  }
   #clickEnd() {
+    this.#draggingMinimap = false;
     this.currentView().clickEnd();
   }
   #mouseDragEvent(delta) {
+    if (this.#draggingMinimap) {
+      if (this.#mousePosition !== void 0) {
+        this.#lookAtFromMinimap(this.#mousePosition);
+      }
+      return;
+    }
     let draggingSomething = this.currentView().mouseDragEvent(delta, this.#camera.zoom);
     if (!draggingSomething) {
       this.#camera.position.x += delta.x;
@@ -6645,12 +7195,45 @@ var NodeFlowGraph = class {
   }
   #lastFrameCursor;
   #cursor;
-  #render() {
-    if (this.#canvas.parentNode !== null) {
-      var rect = this.#canvas.parentNode.getBoundingClientRect();
-      this.#canvas.width = rect.width;
-      this.#canvas.height = rect.height;
+  #minimap;
+  #stopRendering;
+  #sizeObserver;
+  #matchCanvasToParent() {
+    const parent = this.#canvas.parentNode;
+    if (parent === null) {
+      return;
+    }
+    const rect = parent.getBoundingClientRect();
+    if (this.#canvas.width === rect.width && this.#canvas.height === rect.height) {
+      return;
     }
+    this.#canvas.width = rect.width;
+    this.#canvas.height = rect.height;
+  }
+  #watchCanvasSize() {
+    this.#matchCanvasToParent();
+    const parent = this.#canvas.parentNode;
+    if (parent === null || typeof ResizeObserver === "undefined") {
+      return;
+    }
+    this.#sizeObserver = new ResizeObserver(() => {
+      this.#matchCanvasToParent();
+      requestRender();
+    });
+    this.#sizeObserver.observe(parent);
+  }
+  requestRender() {
+    requestRender();
+  }
+  renderContinuously() {
+    return renderContinuously();
+  }
+  dispose() {
+    this.#stopRendering();
+    this.#sizeObserver?.disconnect();
+  }
+  #render() {
+    this.#matchCanvasToParent();
     this.#cursor = "default" /* Default */;
     TimeExecution("Render_Background", this.#renderBackground.bind(this));
     TimeExecution("Render_View_" + this.#currentView, () => {
@@ -6659,13 +7242,15 @@ var NodeFlowGraph = class {
         this.#cursor = results?.cursorStyle;
       }
     });
+    TimeExecution("Render_Minimap", () => {
+      this.#minimap.render(this.#ctx, this.#canvas, this.#camera, this.#mainNodeSubsystem.getNodes());
+    });
     TimeExecution("Render_Context", this.#renderContextMenu.bind(this));
     TimeExecution("Render_QuickMenu", this.#renderQuickMenu.bind(this));
     if (this.#lastFrameCursor !== this.#cursor) {
       this.#canvas.style.cursor = this.#cursor;
     }
     this.#lastFrameCursor = this.#cursor;
-    window.requestAnimationFrame(this.#render.bind(this));
   }
   #renderBackground() {
     this.#backgroundRenderer(this.#canvas, this.#ctx, this.#camera.position, this.#camera.zoom);
@@ -6706,6 +7291,7 @@ export {
   GlobalWidgetFactory,
   ImageWidget,
   MessageType,
+  Minimap,
   NodeFactory,
   NodeFlowGraph,
   NodeState,
@@ -6719,6 +7305,10 @@ export {
   Theme,
   ToggleWidget,
   WidgetFactory,
-  portsCompatible
+  portConfigTypes,
+  portsCompatible,
+  renderContinuously,
+  requestRender,
+  typeSetsCompatible
 };
 //# sourceMappingURL=index.mjs.map