@elicdavis/node-flow 0.2.3 → 0.2.5

package/index.html

@@ -8,7 +8,7 @@
     <link rel="shortcut icon" href="#" />
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap"
+    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&family=VT323&display=swap"
         rel="stylesheet">
     <style>
         * {
@@ -253,6 +253,7 @@
                 },
                 Note: {
                     FontColor: "#ffffff",
+                    CodeFontFamily: "VT323",
                     CodeBlock: { BackgroundColor: "#000000", FontColor: "#c0c0c0", BorderRadius: 0 },
                 },
             },

package/package.json

@@ -2,7 +2,7 @@
   "name": "@elicdavis/node-flow",
   "description": "build node graphs",
   "author": "Eli C Davis",
-  "version": "0.2.3",
+  "version": "0.2.5",
   "license": "MIT",
   "keywords": [
     "nodes",

package/src/contextMenu.ts

@@ -261,11 +261,11 @@ export class ContextMenu {
 
     #bounds: Box | null = null;
 
-    #contains(point: Vector2): boolean {
+    public contains(point: Vector2): boolean {
         if (this.#bounds !== null && InBox(this.#bounds, point)) {
             return true;
         }
-        return this.#openSubMenu !== undefined && this.#openSubMenu.#contains(point);
+        return this.#openSubMenu !== undefined && this.#openSubMenu.contains(point);
     }
 
     /**
@@ -315,7 +315,7 @@ export class ContextMenu {
             Size: { x: scaledEntryWidth, y: totalScaledHeight },
         };
 
-        const pointer = mousePosition !== undefined && this.#openSubMenu !== undefined && this.#openSubMenu.#contains(mousePosition)
+        const pointer = mousePosition !== undefined && this.#openSubMenu !== undefined && this.#openSubMenu.contains(mousePosition)
             ? undefined
             : mousePosition;
 

package/src/graph.ts

@@ -10,7 +10,7 @@ import { Clamp01 } from "./utils/math";
 import { GraphSubsystem, RenderResults } from './graphSubsystem';
 import { FlowNote } from "./notes/note";
 import { NoteAddedCallback, NoteDragStartCallback, NoteDragStopCallback, NoteRemovedCallback, NoteSubsystem, NoteSubsystemConfig } from "./notes/subsystem";
-import { ConnectionRendererConfiguration, DanglingConnection, InternalConnection, NodeAddedCallback, NodeRemovedCallback, NodeSubsystem } from "./nodes/subsystem";
+import { ConnectionRendererConfiguration, DanglingConnection, InternalConnection, NodeAddedCallback, NodeHoverCallback, NodeRemovedCallback, NodeSubsystem } from "./nodes/subsystem";
 import { Connection } from './connection';
 import { Publisher } from './nodes/publisher';
 import { VectorPool } from './types/pool';
@@ -21,6 +21,7 @@ import { QuickMenu } from './quickMenu';
 import { onRenderRequested, renderContinuously, requestRender } from './render_scheduler';
 import { placeEditsDuring } from './widgets/inplace';
 import { Minimap, MinimapConfig } from './minimap';
+import { Cast } from './port';
 
 export type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;
 
@@ -65,6 +66,7 @@ export interface FlowNodeGraphConfiguration {
     idleConnection?: ConnectionRendererConfiguration
     contextMenu?: ContextMenuConfig
     nodes?: NodeFactoryConfig
+    casts?: Array<Cast>
     board?: NoteSubsystemConfig
     minimap?: MinimapConfig
 }
@@ -164,6 +166,8 @@ export class NodeFlowGraph {
 
     #mousePosition: Vector2 | undefined;
 
+    #mouseOverCanvas = false;
+
     #camera: Camera;
 
     #openedContextMenu: OpenContextMenu | null;
@@ -185,7 +189,8 @@ export class NodeFlowGraph {
 
         this.#mainNodeSubsystem = new NodeSubsystem(postProcessPass, {
             nodes: config?.nodes,
-            idleConnection: config?.idleConnection
+            idleConnection: config?.idleConnection,
+            casts: config?.casts,
         });
 
         this.#lastFrameCursor = CursorStyle.Default;
@@ -245,6 +250,7 @@ export class NodeFlowGraph {
             this.#mouseDragEvent.bind(this),
             (mousePosition) => {
                 this.#mousePosition = mousePosition;
+                this.#mouseOverCanvas = true;
             },
             this.#clickStart.bind(this),
             this.#clickEnd.bind(this),
@@ -252,6 +258,9 @@ export class NodeFlowGraph {
             this.#fileDrop.bind(this),
             (factor, anchor) => {
                 this.#zoomBy(factor, anchor);
+            },
+            () => {
+                this.#mouseOverCanvas = false;
             }
         );
 
@@ -455,6 +464,7 @@ export class NodeFlowGraph {
         this.#contextMenuEntryHovering = null;
 
         this.#mousePosition = mousePosition;
+        this.#mouseOverCanvas = true;
 
         if (this.#minimap.contains(mousePosition)) {
             this.#lookAtFromMinimap(mousePosition);
@@ -494,6 +504,10 @@ export class NodeFlowGraph {
         this.#mainNodeSubsystem.addPublisher(identifier, publisher);
     }
 
+    setCasts(casts: Array<Cast>): void {
+        this.#mainNodeSubsystem.setCasts(casts);
+    }
+
     getNodes(): Array<FlowNode> {
         return this.#mainNodeSubsystem.getNodes();
     }
@@ -643,6 +657,10 @@ export class NodeFlowGraph {
         this.#mainNodeSubsystem.addOnNodeRemovedListener(callback);
     }
 
+    public addNodeHoverListener(callback: NodeHoverCallback): void {
+        this.#mainNodeSubsystem.addNodeHoverListener(callback);
+    }
+
     #sceenPositionToGraphPosition(screenPosition: Vector2): Vector2 {
         const out = Zero();
         this.#camera.screenSpaceToGraphSpace(screenPosition, out);
@@ -674,6 +692,7 @@ export class NodeFlowGraph {
             {
                 needs: dangling.needs,
                 types: dangling.types,
+                casts: this.#mainNodeSubsystem.casts(),
                 onCreated: dangling.connectTo,
             },
         );
@@ -767,7 +786,7 @@ export class NodeFlowGraph {
 
         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;
                 }
@@ -790,6 +809,21 @@ export class NodeFlowGraph {
         this.#lastFrameCursor = this.#cursor;
     }
 
+    #pointer(): Vector2 | undefined {
+        return this.#mouseOverCanvas ? this.#mousePosition : undefined;
+    }
+
+    #pointerOnGraph(): Vector2 | undefined {
+        const pointer = this.#pointer();
+        if (pointer === undefined) {
+            return undefined;
+        }
+        if (this.#openedContextMenu?.Menu.contains(pointer) || this.#openQuickMenu?.Menu.contains(pointer)) {
+            return undefined;
+        }
+        return pointer;
+    }
+
     #renderBackground(): void {
         this.#backgroundRenderer(this.#canvas, this.#ctx, this.#camera.position, this.#camera.zoom);
     }
@@ -799,7 +833,7 @@ export class NodeFlowGraph {
             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 = CursorStyle.Pointer;
@@ -813,7 +847,7 @@ export class NodeFlowGraph {
             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 = CursorStyle.Pointer;

package/src/index.ts

@@ -24,8 +24,8 @@ export {
 };
 
 // Ports
-import { Port, PortConfig, PortStyle, PortType, portsCompatible } from './port';
-export { Port, PortConfig, PortStyle, PortType, portsCompatible };
+import { Cast, Port, PortConfig, PortStyle, PortType, portsCompatible, portsConnect } from './port';
+export { Cast, Port, PortConfig, PortStyle, PortType, portsCompatible, portsConnect };
 
 // Rendering
 import { renderContinuously, requestRender } from './render_scheduler';
@@ -34,14 +34,14 @@ export { renderContinuously, requestRender };
 import { Minimap, MinimapConfig } from './minimap';
 export { Minimap, MinimapConfig };
 
-import { DanglingConnection, InternalConnection } from './nodes/subsystem';
-export { DanglingConnection, InternalConnection };
+import { DanglingConnection, InternalConnection, NodeHoverCallback } from './nodes/subsystem';
+export { DanglingConnection, InternalConnection, NodeHoverCallback };
 
 import { NodeMenuFilter } from './nodes/publisher';
 export { NodeMenuFilter };
 
-import { portConfigTypes, typeSetsCompatible } from './port';
-export { portConfigTypes, typeSetsCompatible };
+import { portConfigTypes, portTypeColor, typeSetsCompatible, typeSetsConnect } from './port';
+export { portConfigTypes, portTypeColor, typeSetsCompatible, typeSetsConnect };
 
 // Connections
 import {

package/src/input.ts

@@ -19,6 +19,8 @@ export class MouseObserver {
     #clickStop: () => void;
     #contextMenu: (position: Vector2) => void;
     #zoomCallback: (factor: number, anchor: Vector2) => void;
+    #leaveCallback: (() => void) | undefined;
+    #inside = false;
 
     #longPressTimer: ReturnType<typeof setTimeout> | null = null;
     #longPressOrigin: Vector2 = Zero();
@@ -35,6 +37,7 @@ export class MouseObserver {
         contextMenu: (position: Vector2) => void,
         fileDrop: (file: File) => void,
         zoomCallback: (factor: number, anchor: Vector2) => void,
+        leaveCallback?: () => void,
     ) {
         this.#ele = ele;
         this.#dragCallback = dragCallback;
@@ -43,6 +46,7 @@ export class MouseObserver {
         this.#clickStop = clickStop;
         this.#contextMenu = contextMenu;
         this.#zoomCallback = zoomCallback;
+        this.#leaveCallback = leaveCallback;
 
         this.#clicked = false;
         this.#lastTouch = Zero();
@@ -64,6 +68,12 @@ export class MouseObserver {
         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 });
@@ -144,6 +154,7 @@ export class MouseObserver {
         if (this.#fromTouch()) {
             return;
         }
+        this.#inside = true;
         const pos = this.#mousePos(event);
         if (this.#clicked) {
             const delta = Zero();
@@ -158,6 +169,7 @@ export class MouseObserver {
         if (event.button !== 0 || this.#fromTouch()) {
             return;
         }
+        this.#inside = true;
         this.#clicked = true;
         this.#clickStart(this.#mousePos(event), event.ctrlKey || event.shiftKey);
     }
@@ -166,8 +178,12 @@ export class MouseObserver {
         if (event.button !== 0 || this.#fromTouch()) {
             return;
         }
+        const wasClicked = this.#clicked;
         this.#clicked = false;
         this.#clickStop();
+        if (wasClicked && !this.#inside) {
+            this.#leaveCallback?.();
+        }
     }
 
     #touchStart(event: TouchEvent): void {

package/src/markdown/syntaxParser.ts

@@ -150,7 +150,7 @@ export class MarkdownSyntaxParser {
             this.#inc();
         }
 
-        return [new Text(content, { font: "monospace" })];
+        return [new Text(content, { font: Theme.Note.CodeFontFamily ?? "monospace" })];
     }
 
     #text(): Array<Text> {
@@ -315,7 +315,7 @@ export class MarkdownSyntaxParser {
         this.#inc(); // puts us on the next token
 
         const codeBlockText = this.#originalText.substring(start as number, end).replace(/\r?\n$/, "");
-        const entryText = new Text(codeBlockText);
+        const entryText = new Text(codeBlockText, { font: Theme.Note.CodeFontFamily ?? undefined });
         this.#assignStandardStyling([entryText])
         entryText.setColor(Theme.Note.CodeBlock.FontColor);
         return new CodeBlockEntry(entryText)

package/src/node.ts

@@ -237,6 +237,8 @@ export class FlowNode {
 
     #selected: boolean;
 
+    #highlighted = false;
+
     #inputPortPositions: List<Box>;
 
     #outputPortPositions: List<Box>;
@@ -368,6 +370,18 @@ export class FlowNode {
         }
     }
 
+    public highlighted(): boolean {
+        return this.#highlighted;
+    }
+
+    public setHighlighted(highlighted: boolean): void {
+        if (this.#highlighted === highlighted) {
+            return;
+        }
+        this.#highlighted = highlighted;
+        requestRender();
+    }
+
     public raiseDragStoppedEvent() {
         for (let i = 0; i < this.#onDragStop.length; i++) {
             this.#onDragStop[i](this);
@@ -1188,6 +1202,21 @@ export class FlowNode {
             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();
+            }
+
             // Title
             const borderSize = nodeStyle.borderSize();
             ctx.textAlign = TextAlign.Center;

package/src/nodes/publisher.ts

@@ -1,6 +1,6 @@
 import { ContextMenuConfig, ContextMenuItemConfig } from "../contextMenu";
 import { FlowNode, FlowNodeConfig } from '../node';
-import { PortConfig, PortType, portConfigTypes, typeSetsCompatible } from "../port";
+import { Cast, PortConfig, PortType, portConfigTypes, typeSetsConnect } from "../port";
 import { Vector2 } from "../types/vector2";
 import { NodeSubsystem } from "./subsystem";
 
@@ -15,18 +15,16 @@ export interface NodeMenuFilter {
     /** Types that side has to accept. An empty list takes anything. */
     types: Array<string>;
 
+    casts?: Array<Cast>;
+
     onCreated?: (node: FlowNode) => void;
 }
 
 function offersMatchingPort(config: FlowNodeConfig, filter: NodeMenuFilter): boolean {
-    const ports: Array<PortConfig> | undefined =
-        filter.needs === PortType.Input ? config.inputs : config.outputs;
-
-    if (ports === undefined) {
-        return false;
+    if (filter.needs === PortType.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));
 }
 
 interface PublisherNodes {

package/src/nodes/subsystem.ts

@@ -6,7 +6,7 @@ import { FlowNode, NodeState } from "../node";
 import { Organize } from "../organize";
 import { PassSubsystem } from "../pass/subsystem";
 import { TimeExecution } from "../performance";
-import { arrayInsertIndex, Port, PortType, portsCompatible } from "../port";
+import { arrayInsertIndex, Cast, Port, PortType, portsConnect } from "../port";
 import { requestRender } from "../render_scheduler";
 import { BoxStyle } from "../styles/box";
 import { CursorStyle } from "../styles/cursor";
@@ -21,6 +21,7 @@ import { Publisher } from "./publisher";
 
 export type NodeAddedCallback = (node: FlowNode) => void;
 export type NodeRemovedCallback = (node: FlowNode) => void;
+export type NodeHoverCallback = (node: FlowNode | null) => void;
 
 export const nodeFlowGroup = "node-flow-graph-node-menu";
 
@@ -84,6 +85,7 @@ interface PortIntersection {
 interface NodeSubsystemConfig {
     idleConnection?: ConnectionRendererConfiguration
     nodes?: NodeFactoryConfig
+    casts?: Array<Cast>
 }
 
 export class NodeSubsystem {
@@ -126,6 +128,7 @@ export class NodeSubsystem {
 
     #boxSelectionNodes: List<number>;
 
+    #casts: Array<Cast>;
 
     #lastCtx: CanvasRenderingContext2D | null;
 
@@ -137,6 +140,10 @@ export class NodeSubsystem {
 
     #registeredNodeAddedCallbacks: Array<NodeAddedCallback>;
 
+    #nodeHoverCallbacks = new Array<NodeHoverCallback>();
+
+    #hoveredNode: FlowNode | null = null;
+
     // ========================================================================
 
     constructor(postProcessPass: PassSubsystem, config?: NodeSubsystemConfig) {
@@ -160,6 +167,15 @@ export class NodeSubsystem {
         this.#boxSelectEnd_graphSpace = Zero();
         this.#boxSelectionNodes = new List<number>();
         this.#lastCtx = null;
+        this.#casts = config?.casts ?? [];
+    }
+
+    public setCasts(casts: Array<Cast>): void {
+        this.#casts = casts;
+    }
+
+    public casts(): Array<Cast> {
+        return this.#casts;
     }
 
     public addPublisher(identifier: string, publisher: Publisher): void {
@@ -188,6 +204,20 @@ export class NodeSubsystem {
         this.#nodeRemovedCallbacks.push(callback);
     }
 
+    public addNodeHoverListener(callback: NodeHoverCallback): void {
+        this.#nodeHoverCallbacks.push(callback);
+    }
+
+    #setHoveredNode(node: FlowNode | null): void {
+        if (this.#hoveredNode === node) {
+            return;
+        }
+        this.#hoveredNode = node;
+        for (let i = 0; i < this.#nodeHoverCallbacks.length; i++) {
+            this.#nodeHoverCallbacks[i](node);
+        }
+    }
+
     clickStart(mousePosition: Vector2, camera: Camera, ctrlKey: boolean): boolean {
         this.#boxSelect = false;
         this.#nodesGrabbed.Clear();
@@ -445,7 +475,10 @@ export class NodeSubsystem {
         let firstHidden = -1;
         for (let i = 0; i < count; i++) {
             const port = side === PortType.Input ? node.inputPort(i) : node.outputPort(i);
-            if (!portsCompatible(port, against)) {
+            const compatible = side === PortType.Input
+                ? portsConnect(against, port, this.#casts)
+                : portsConnect(port, against, this.#casts);
+            if (!compatible) {
                 continue;
             }
             if (!port.hidden()) {
@@ -521,13 +554,13 @@ export class NodeSubsystem {
         }
 
         // Different types, can't connect
-        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;
         }
 
         // Different types, can't connect
-        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;
         }
@@ -559,7 +592,7 @@ export class NodeSubsystem {
     connectNodes(nodeOut: FlowNode, outPort: number, nodeIn: FlowNode, inPort: number): Connection | undefined {
         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;
         }
@@ -955,6 +988,7 @@ export class NodeSubsystem {
         this.#widgetHovering = null;
         this.#nodeHovering = -1;
         this.#boxSelectionNodes.Clear();
+        let hovered: FlowNode | null = null;
 
         const selectedBox_Screenspace = this.#boxSelectionScreenspaceBox(camera);
 
@@ -976,6 +1010,9 @@ export class NodeSubsystem {
 
             if (mousePosition !== undefined && !this.#boxSelect) {
                 const intersection = this.#nodes[i].inBounds(ctx, camera, mousePosition);
+                if (intersection.Node !== undefined) {
+                    hovered = intersection.Node;
+                }
 
                 if (intersection.Node !== undefined && intersection.PortIndex === undefined && intersection.Widget === undefined) {
                     state = NodeState.MouseOver;
@@ -1019,6 +1056,7 @@ export class NodeSubsystem {
 
             this.#nodes[i].render(ctx, camera, state, mousePosition, this.#postProcessPass);
         }
+        this.#setHoveredNode(hovered);
 
         if (this.#widgetCurrentlyClicking !== null) {
             this.#cursor = this.#widgetCurrentlyClicking.Cursor?.() ?? CursorStyle.Pointer;

package/src/port.ts

@@ -91,6 +91,33 @@ export function typeSetsCompatible(a: Array<string>, b: Array<string>): boolean
     return a.some((type) => b.includes(type));
 }
 
+/**
+ * Lets an output of type `from` feed an input of type `to`
+ */
+export interface Cast {
+    from: string;
+    to: string;
+}
+
+/**
+ * Whether an output may feed an input: their types overlap, or a cast takes
+ * one of the output's types to one of the input's.
+ */
+export function portsConnect(output: Port | undefined | null, input: Port | undefined | null, casts?: Array<Cast>): boolean {
+    if (!output || !input) {
+        return false;
+    }
+
+    return typeSetsConnect(output.acceptedTypes(), input.acceptedTypes(), casts);
+}
+
+export function typeSetsConnect(output: Array<string>, input: Array<string>, casts?: Array<Cast>): boolean {
+    if (typeSetsCompatible(output, input)) {
+        return true;
+    }
+    return (casts ?? []).some((cast) => output.includes(cast.from) && input.includes(cast.to));
+}
+
 export function portConfigTypes(config: PortConfig): Array<string> {
     if (config.anyType === true) {
         return [];
@@ -139,6 +166,10 @@ function fallbackColor(type: string, s: number): string {
     return RgbToHex(color);
 }
 
+export function portTypeColor(type: string): string {
+    return fallbackColor(type, 1);
+}
+
 export class Port {
 
     #node: FlowNode;

package/src/quickMenu.ts

@@ -6,6 +6,7 @@ import { FontWeight } from "./styles/text";
 import { Theme } from "./theme";
 import { Text } from './types/text';
 import { ScaleVector, Vector2 } from './types/vector2';
+import { Box, InBox } from './types/box';
 import { Display } from './elements/base';
 
 class QuickMenuGroup {
@@ -325,6 +326,16 @@ export class QuickMenu {
         }
 
         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: Box | null = null;
+
+    public contains(point: Vector2): boolean {
+        return this.#bounds !== null && InBox(this.#bounds, point);
+    }
 }

package/src/theme.ts

@@ -24,7 +24,8 @@ const defaults = {
             Idle: "#1c1c1c",
             MouseOver: "#8e8e8e",
             Grabbed: "white",
-            Selected: "#6e6e6e"
+            Selected: "#6e6e6e",
+            Highlighted: "#ffc95c"
         },
         Bevel: null as BevelColors | null,
         Port: {
@@ -111,6 +112,7 @@ const defaults = {
         H3: {
             FontSize: 16,
         },
+        CodeFontFamily: null as string | null,
         CodeBlock: {
             BackgroundColor: "#0c2b35",
             FontColor: "#afb9bb",

package/test/markdown.test.ts

@@ -3,6 +3,7 @@ import { BuildMarkdown } from '../src/markdown/markdown';
 import { BasicMarkdownEntry, CodeBlockEntry, UnorderedListMarkdownEntry } from '../src/markdown/entry';
 import { FontStyle, FontWeight } from '../src/styles/text';
 import { Text } from '../src/types/text';
+import { setTheme } from '../src/theme';
 
 /** The runs of text in an entry, as [content, weight, style] triples. */
 function runs(entry: any): Array<[string, FontWeight, FontStyle]> {
@@ -141,6 +142,16 @@ describe('markdown: code', () => {
         assert.notStrictEqual(entry.lines()[0].style().getFont(), 'monospace');
     });
 
+    it('sets inline code in the theme code font', () => {
+        setTheme({ Note: { CodeFontFamily: 'VT323' } });
+        try {
+            const entry = BuildMarkdown('a `b` c')[0] as any;
+            assert.strictEqual(entry.lines()[1].style().getFont(), 'VT323');
+        } finally {
+            setTheme();
+        }
+    });
+
     it('keeps a lone backtick as text', () => {
         assert.strictEqual(contentOf(BuildMarkdown('a ` b')[0]), 'a ` b');
     });