@elicdavis/node-flow 0.2.3 → 0.2.4

package/dist/index.mjs

@@ -55,7 +55,8 @@ var defaults = {
       Idle: "#1c1c1c",
       MouseOver: "#8e8e8e",
       Grabbed: "white",
-      Selected: "#6e6e6e"
+      Selected: "#6e6e6e",
+      Highlighted: "#ffc95c"
     },
     Bevel: null,
     Port: {
@@ -142,6 +143,7 @@ var defaults = {
     H3: {
       FontSize: 16
     },
+    CodeFontFamily: null,
     CodeBlock: {
       BackgroundColor: "#0c2b35",
       FontColor: "#afb9bb",
@@ -591,11 +593,11 @@ var ContextMenu = class _ContextMenu {
   #tempBox = { Position: Zero(), Size: Zero() };
   #openSubMenu;
   #bounds = null;
-  #contains(point) {
+  contains(point) {
     if (this.#bounds !== null && InBox(this.#bounds, point)) {
       return true;
     }
-    return this.#openSubMenu !== void 0 && this.#openSubMenu.#contains(point);
+    return this.#openSubMenu !== void 0 && this.#openSubMenu.contains(point);
   }
   /**
    * A submenu is anchored to its parent's left edge and told the parent's
@@ -638,7 +640,7 @@ var ContextMenu = class _ContextMenu {
       Position: { x: position.x, y: position.y },
       Size: { x: scaledEntryWidth, y: totalScaledHeight }
     };
-    const pointer = mousePosition !== void 0 && this.#openSubMenu !== void 0 && this.#openSubMenu.#contains(mousePosition) ? void 0 : mousePosition;
+    const pointer = mousePosition !== void 0 && this.#openSubMenu !== void 0 && this.#openSubMenu.contains(mousePosition) ? void 0 : mousePosition;
     this.#tempBox.Size.x = scaledEntryWidth;
     this.#tempBox.Size.y = scaledEntryHeight;
     CopyVector2(this.#tempBox.Position, position);
@@ -748,12 +750,14 @@ var MouseObserver = class {
   #clickStop;
   #contextMenu;
   #zoomCallback;
+  #leaveCallback;
+  #inside = false;
   #longPressTimer = null;
   #longPressOrigin = Zero();
   #longPressFired = false;
   #pinchDist = 0;
   #lastTouchAt = 0;
-  constructor(ele, dragCallback, moveCallback, clickStart, clickStop, contextMenu, fileDrop, zoomCallback) {
+  constructor(ele, dragCallback, moveCallback, clickStart, clickStop, contextMenu, fileDrop, zoomCallback, leaveCallback) {
     this.#ele = ele;
     this.#dragCallback = dragCallback;
     this.#moveCallback = moveCallback;
@@ -761,6 +765,7 @@ var MouseObserver = class {
     this.#clickStop = clickStop;
     this.#contextMenu = contextMenu;
     this.#zoomCallback = zoomCallback;
+    this.#leaveCallback = leaveCallback;
     this.#clicked = false;
     this.#lastTouch = Zero();
     this.#lastMousePosition = Zero();
@@ -775,6 +780,12 @@ var MouseObserver = class {
     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("mouseleave", redraws(() => {
+      this.#inside = false;
+      if (!this.#clicked) {
+        this.#leaveCallback?.();
+      }
+    }), 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) => {
@@ -844,6 +855,7 @@ var MouseObserver = class {
     if (this.#fromTouch()) {
       return;
     }
+    this.#inside = true;
     const pos = this.#mousePos(event);
     if (this.#clicked) {
       const delta = Zero();
@@ -857,6 +869,7 @@ var MouseObserver = class {
     if (event.button !== 0 || this.#fromTouch()) {
       return;
     }
+    this.#inside = true;
     this.#clicked = true;
     this.#clickStart(this.#mousePos(event), event.ctrlKey || event.shiftKey);
   }
@@ -864,8 +877,12 @@ var MouseObserver = class {
     if (event.button !== 0 || this.#fromTouch()) {
       return;
     }
+    const wasClicked = this.#clicked;
     this.#clicked = false;
     this.#clickStop();
+    if (wasClicked && !this.#inside) {
+      this.#leaveCallback?.();
+    }
   }
   #touchStart(event) {
     this.#lastTouchAt = Date.now();
@@ -1555,6 +1572,18 @@ function typeSetsCompatible(a, b) {
   }
   return a.some((type) => b.includes(type));
 }
+function portsConnect(output, input, casts) {
+  if (!output || !input) {
+    return false;
+  }
+  return typeSetsConnect(output.acceptedTypes(), input.acceptedTypes(), casts);
+}
+function typeSetsConnect(output, input, casts) {
+  if (typeSetsCompatible(output, input)) {
+    return true;
+  }
+  return (casts ?? []).some((cast) => output.includes(cast.from) && input.includes(cast.to));
+}
 function portConfigTypes(config) {
   if (config.anyType === true) {
     return [];
@@ -1591,6 +1620,9 @@ function fallbackColor(type, s) {
   HSV2RGB(hsv, color);
   return RgbToHex(color);
 }
+function portTypeColor(type) {
+  return fallbackColor(type, 1);
+}
 var Port = class {
   #node;
   #displayName;
@@ -3899,11 +3931,10 @@ 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;
+  if (filter.needs === "INPUT" /* Input */) {
+    return (config.inputs ?? []).some((port) => typeSetsConnect(filter.types, portConfigTypes(port), filter.casts));
   }
-  return ports.some((port) => typeSetsCompatible(portConfigTypes(port), filter.types));
+  return (config.outputs ?? []).some((port) => typeSetsConnect(portConfigTypes(port), filter.types, filter.casts));
 }
 var Publisher = class {
   #name;
@@ -4084,11 +4115,14 @@ var NodeSubsystem2 = class {
   #boxSelectStart_graphSpace;
   #boxSelectEnd_graphSpace;
   #boxSelectionNodes;
+  #casts;
   #lastCtx;
   #lastMousePosition;
   // LISTENERS ==============================================================
   #nodeRemovedCallbacks;
   #registeredNodeAddedCallbacks;
+  #nodeHoverCallbacks = new Array();
+  #hoveredNode = null;
   // ========================================================================
   constructor(postProcessPass, config) {
     this.#postProcessPass = postProcessPass;
@@ -4110,6 +4144,13 @@ var NodeSubsystem2 = class {
     this.#boxSelectEnd_graphSpace = Zero();
     this.#boxSelectionNodes = new List();
     this.#lastCtx = null;
+    this.#casts = config?.casts ?? [];
+  }
+  setCasts(casts) {
+    this.#casts = casts;
+  }
+  casts() {
+    return this.#casts;
   }
   addPublisher(identifier, publisher) {
     this.#nodeFactory.addPublisher(identifier, publisher);
@@ -4132,6 +4173,18 @@ var NodeSubsystem2 = class {
     }
     this.#nodeRemovedCallbacks.push(callback);
   }
+  addNodeHoverListener(callback) {
+    this.#nodeHoverCallbacks.push(callback);
+  }
+  #setHoveredNode(node) {
+    if (this.#hoveredNode === node) {
+      return;
+    }
+    this.#hoveredNode = node;
+    for (let i = 0; i < this.#nodeHoverCallbacks.length; i++) {
+      this.#nodeHoverCallbacks[i](node);
+    }
+  }
   clickStart(mousePosition, camera, ctrlKey) {
     this.#boxSelect = false;
     this.#nodesGrabbed.Clear();
@@ -4351,7 +4404,8 @@ var NodeSubsystem2 = class {
     let firstHidden = -1;
     for (let i = 0; i < count; i++) {
       const port = side === "INPUT" /* Input */ ? node.inputPort(i) : node.outputPort(i);
-      if (!portsCompatible(port, against)) {
+      const compatible = side === "INPUT" /* Input */ ? portsConnect(against, port, this.#casts) : portsConnect(port, against, this.#casts);
+      if (!compatible) {
         continue;
       }
       if (!port.hidden()) {
@@ -4408,11 +4462,11 @@ var NodeSubsystem2 = class {
       this.#clearCurrentlySelectedConnection();
       return;
     }
-    if (this.#portHovering.InputPort && !portsCompatible(this.#portHovering.Port, conn.outPort())) {
+    if (this.#portHovering.InputPort && !portsConnect(conn.outPort(), this.#portHovering.Port, this.#casts)) {
       this.#clearCurrentlySelectedConnection();
       return;
     }
-    if (!this.#portHovering.InputPort && !portsCompatible(this.#portHovering.Port, conn.inPort())) {
+    if (!this.#portHovering.InputPort && !portsConnect(this.#portHovering.Port, conn.inPort(), this.#casts)) {
       this.#clearCurrentlySelectedConnection();
       return;
     }
@@ -4435,7 +4489,7 @@ var NodeSubsystem2 = class {
   connectNodes(nodeOut, outPort, nodeIn, inPort) {
     const from = nodeOut.outputPort(outPort);
     const to = nodeIn.inputPort(inPort);
-    if (!portsCompatible(from, to)) {
+    if (!portsConnect(from, to, this.#casts)) {
       console.error("can't connect nodes of different types", from.getDataType(), to.getDataType());
       return;
     }
@@ -4778,6 +4832,7 @@ var NodeSubsystem2 = class {
     this.#widgetHovering = null;
     this.#nodeHovering = -1;
     this.#boxSelectionNodes.Clear();
+    let hovered = null;
     const selectedBox_Screenspace = this.#boxSelectionScreenspaceBox(camera);
     const canvas = {
       Position: { x: 0, y: 0 },
@@ -4791,6 +4846,9 @@ var NodeSubsystem2 = class {
       }
       if (mousePosition !== void 0 && !this.#boxSelect) {
         const intersection = this.#nodes[i].inBounds(ctx, camera, mousePosition);
+        if (intersection.Node !== void 0) {
+          hovered = intersection.Node;
+        }
         if (intersection.Node !== void 0 && intersection.PortIndex === void 0 && intersection.Widget === void 0) {
           state = 1 /* MouseOver */;
           this.#nodeHovering = i;
@@ -4822,6 +4880,7 @@ var NodeSubsystem2 = class {
       }
       this.#nodes[i].render(ctx, camera, state, mousePosition, this.#postProcessPass);
     }
+    this.#setHoveredNode(hovered);
     if (this.#widgetCurrentlyClicking !== null) {
       this.#cursor = this.#widgetCurrentlyClicking.Cursor?.() ?? "pointer" /* Pointer */;
     }
@@ -5127,6 +5186,7 @@ var FlowNode = class {
   #elementSpacing;
   // Runtime ================================================================
   #selected;
+  #highlighted = false;
   #inputPortPositions;
   #outputPortPositions;
   #widgetPositions;
@@ -5230,6 +5290,16 @@ var FlowNode = class {
       this.#onSelect[i]();
     }
   }
+  highlighted() {
+    return this.#highlighted;
+  }
+  setHighlighted(highlighted) {
+    if (this.#highlighted === highlighted) {
+      return;
+    }
+    this.#highlighted = highlighted;
+    requestRender();
+  }
   raiseDragStoppedEvent() {
     for (let i = 0; i < this.#onDragStop.length; i++) {
       this.#onDragStop[i](this);
@@ -5927,6 +5997,22 @@ var FlowNode = class {
       const nodeBounds = this.calculateBounds(ctx, camera);
       const nodeStyle = this.#calculateStyle(state);
       nodeStyle.Draw(ctx, nodeBounds, camera.zoom);
+      if (this.#highlighted) {
+        const gap = 3;
+        ctx.save();
+        ctx.strokeStyle = Theme.Node.Border.Highlighted;
+        ctx.lineWidth = 2;
+        ctx.beginPath();
+        ctx.roundRect(
+          nodeBounds.Position.x - gap,
+          nodeBounds.Position.y - gap,
+          nodeBounds.Size.x + gap * 2,
+          nodeBounds.Size.y + gap * 2,
+          nodeStyle.radius() * camera.zoom + gap
+        );
+        ctx.stroke();
+        ctx.restore();
+      }
       const borderSize = nodeStyle.borderSize();
       ctx.textAlign = "center" /* Center */;
       ctx.textBaseline = "middle" /* Middle */;
@@ -6632,7 +6718,7 @@ var MarkdownSyntaxParser = class {
       content += token.lexeme();
       this.#inc();
     }
-    return [new Text(content, { font: "monospace" })];
+    return [new Text(content, { font: Theme.Note.CodeFontFamily ?? "monospace" })];
   }
   #text() {
     let contents = new Array();
@@ -6746,7 +6832,7 @@ var MarkdownSyntaxParser = class {
     this.#inc();
     this.#inc();
     const codeBlockText = this.#originalText.substring(start, end).replace(/\r?\n$/, "");
-    const entryText = new Text(codeBlockText);
+    const entryText = new Text(codeBlockText, { font: Theme.Note.CodeFontFamily ?? void 0 });
     this.#assignStandardStyling([entryText]);
     entryText.setColor(Theme.Note.CodeBlock.FontColor);
     return new CodeBlockEntry(entryText);
@@ -7508,8 +7594,16 @@ var QuickMenu = class {
       pos.x = 0;
     }
     this.#container.render(ctx, pos, 1, this.renderSize);
+    this.#bounds = {
+      Position: { x: pos.x, y: pos.y },
+      Size: { x: this.renderSize.x, y: this.renderSize.y }
+    };
     return null;
   }
+  #bounds = null;
+  contains(point) {
+    return this.#bounds !== null && InBox(this.#bounds, point);
+  }
 };
 
 // src/minimap.ts
@@ -7720,6 +7814,7 @@ var NodeFlowGraph = class {
   #backgroundRenderer;
   #contextMenuConfig;
   #mousePosition;
+  #mouseOverCanvas = false;
   #camera;
   #openedContextMenu;
   #openQuickMenu;
@@ -7732,7 +7827,8 @@ var NodeFlowGraph = class {
     const postProcessPass = new PassSubsystem();
     this.#mainNodeSubsystem = new NodeSubsystem2(postProcessPass, {
       nodes: config?.nodes,
-      idleConnection: config?.idleConnection
+      idleConnection: config?.idleConnection,
+      casts: config?.casts
     });
     this.#lastFrameCursor = "default" /* Default */;
     this.#cursor = "default" /* Default */;
@@ -7781,6 +7877,7 @@ var NodeFlowGraph = class {
       this.#mouseDragEvent.bind(this),
       (mousePosition) => {
         this.#mousePosition = mousePosition;
+        this.#mouseOverCanvas = true;
       },
       this.#clickStart.bind(this),
       this.#clickEnd.bind(this),
@@ -7788,6 +7885,9 @@ var NodeFlowGraph = class {
       this.#fileDrop.bind(this),
       (factor, anchor) => {
         this.#zoomBy(factor, anchor);
+      },
+      () => {
+        this.#mouseOverCanvas = false;
       }
     );
     document.addEventListener(
@@ -7945,6 +8045,7 @@ var NodeFlowGraph = class {
     this.#openQuickMenu = null;
     this.#contextMenuEntryHovering = null;
     this.#mousePosition = mousePosition;
+    this.#mouseOverCanvas = true;
     if (this.#minimap.contains(mousePosition)) {
       this.#lookAtFromMinimap(mousePosition);
       this.#draggingMinimap = true;
@@ -7973,6 +8074,9 @@ var NodeFlowGraph = class {
   addPublisher(identifier, publisher) {
     this.#mainNodeSubsystem.addPublisher(identifier, publisher);
   }
+  setCasts(casts) {
+    this.#mainNodeSubsystem.setCasts(casts);
+  }
   getNodes() {
     return this.#mainNodeSubsystem.getNodes();
   }
@@ -8093,6 +8197,9 @@ var NodeFlowGraph = class {
   addOnNodeRemovedListener(callback) {
     this.#mainNodeSubsystem.addOnNodeRemovedListener(callback);
   }
+  addNodeHoverListener(callback) {
+    this.#mainNodeSubsystem.addNodeHoverListener(callback);
+  }
   #sceenPositionToGraphPosition(screenPosition) {
     const out = Zero();
     this.#camera.screenSpaceToGraphSpace(screenPosition, out);
@@ -8118,6 +8225,7 @@ var NodeFlowGraph = class {
       {
         needs: dangling.needs,
         types: dangling.types,
+        casts: this.#mainNodeSubsystem.casts(),
         onCreated: dangling.connectTo
       }
     );
@@ -8189,7 +8297,7 @@ var NodeFlowGraph = class {
     TimeExecution("Render_Background", this.#renderBackground.bind(this));
     TimeExecution("Render_View_" + this.#currentView, () => {
       placeEditsDuring(this.#canvas, () => {
-        let results = this.currentView().render(this.#ctx, this.#camera, this.#mousePosition);
+        let results = this.currentView().render(this.#ctx, this.#camera, this.#pointerOnGraph());
         if (results?.cursorStyle) {
           this.#cursor = results?.cursorStyle;
         }
@@ -8205,6 +8313,19 @@ var NodeFlowGraph = class {
     }
     this.#lastFrameCursor = this.#cursor;
   }
+  #pointer() {
+    return this.#mouseOverCanvas ? this.#mousePosition : void 0;
+  }
+  #pointerOnGraph() {
+    const pointer = this.#pointer();
+    if (pointer === void 0) {
+      return void 0;
+    }
+    if (this.#openedContextMenu?.Menu.contains(pointer) || this.#openQuickMenu?.Menu.contains(pointer)) {
+      return void 0;
+    }
+    return pointer;
+  }
   #renderBackground() {
     this.#backgroundRenderer(this.#canvas, this.#ctx, this.#camera.position, this.#camera.zoom);
   }
@@ -8213,7 +8334,7 @@ var NodeFlowGraph = class {
       if (this.#openedContextMenu !== null) {
         const pos = VectorPool.get();
         this.#camera.graphSpaceToScreenSpace(this.#openedContextMenu.Position, pos);
-        this.#contextMenuEntryHovering = this.#openedContextMenu.Menu.render(this.#ctx, pos, this.#camera.zoom, this.#mousePosition, true);
+        this.#contextMenuEntryHovering = this.#openedContextMenu.Menu.render(this.#ctx, pos, this.#camera.zoom, this.#pointer(), true);
         if (this.#contextMenuEntryHovering !== null) {
           this.#cursor = "pointer" /* Pointer */;
         }
@@ -8225,7 +8346,7 @@ var NodeFlowGraph = class {
       if (this.#openQuickMenu !== null) {
         const pos = VectorPool.get();
         this.#camera.graphSpaceToScreenSpace(this.#openQuickMenu.Position, pos);
-        this.#contextMenuEntryHovering = this.#openQuickMenu.Menu.render(this.#ctx, pos, this.#camera.zoom, this.#mousePosition);
+        this.#contextMenuEntryHovering = this.#openQuickMenu.Menu.render(this.#ctx, pos, this.#camera.zoom, this.#pointer());
         if (this.#contextMenuEntryHovering !== null) {
           this.#cursor = "pointer" /* Pointer */;
         }
@@ -8272,12 +8393,15 @@ export {
   formatNumber,
   onThemeChange,
   portConfigTypes,
+  portTypeColor,
   portsCompatible,
+  portsConnect,
   renderContinuously,
   requestRender,
   setTheme,
   themeVersion,
   typeSetsCompatible,
+  typeSetsConnect,
   widgetFont
 };
 //# sourceMappingURL=index.mjs.map