@elicdavis/node-flow 0.1.19 → 0.2.0

package/package.json

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

package/src/connection.ts

@@ -1,6 +1,6 @@
 import { FlowNode } from "./node";
 import { Port } from "./port";
-import { BoxCenter, InBox } from "./types/box";
+import { Box, BoxCenter, InBox } from "./types/box";
 import { Vector2, Zero } from "./types/vector2";
 import { Clamp01 } from "./utils/math";
 
@@ -134,7 +134,7 @@ export class Connection {
         }
 
         if (this.#inNode !== null) {
-            const inPortBox = this.#inNode.inputPortPosition(this.#inNodePortIndex)
+            const inPortBox = this.#inSlotBox();
             if (inPortBox === undefined) {
                 return;
             }
@@ -202,7 +202,7 @@ export class Connection {
         this.clearOutput();
     }
 
-    setInput(node: FlowNode, portIndex: number, replace?: boolean): void {
+    setInput(node: FlowNode, portIndex: number, replace?: boolean, insertAt?: number): void {
         this.#inNode = node;
         this.#inNodePortIndex = portIndex;
 
@@ -210,7 +210,7 @@ export class Connection {
         if(!!replace && port.connections().length > 0) {
             port.replaceConnection(this, 0);
         } else {
-            port.addConnection(this);
+            port.addConnection(this, insertAt);
         }
     }
 
@@ -232,9 +232,34 @@ export class Connection {
         this.#outNodePortIndex = -1;
     }
 
+    /**
+     * The part of the input port this wire lands on: the whole port, or its
+     * own slot on a port holding several wires.
+     */
+    #inSlotBox(): Box | undefined {
+        if (this.#inNode === null) {
+            return undefined;
+        }
+        const box = this.#inNode.inputPortPosition(this.#inNodePortIndex);
+        const port = this.#inNode.inputPort(this.#inNodePortIndex);
+        const slots = port.slots();
+        if (box === undefined || slots === 1) {
+            return box;
+        }
+        const index = port.connections().indexOf(this);
+        if (index === -1) {
+            return box;
+        }
+        const height = box.Size.y / slots;
+        return {
+            Position: { x: box.Position.x, y: box.Position.y + (index * height) },
+            Size: { x: box.Size.x, y: height },
+        };
+    }
+
     mouseOverPort(mousePosition: Vector2): Port | null {
         if (this.#inNode !== null) {
-            const inPortBox = this.#inNode.inputPortPosition(this.#inNodePortIndex)
+            const inPortBox = this.#inSlotBox();
             if (inPortBox !== undefined && InBox(inPortBox, mousePosition)) {
                 return this.#inNode.inputPort(this.#inNodePortIndex)
             }

package/src/contextMenu.ts

@@ -259,11 +259,23 @@ export class ContextMenu {
 
     #openSubMenu: ContextMenu | undefined;
 
+    #bounds: Box | null = null;
 
-    public render(ctx: CanvasRenderingContext2D, pppp: Vector2, graphScale: number, mousePosition: Vector2 | undefined, openRight: boolean): ContextEntry | null {
+    #contains(point: Vector2): boolean {
+        if (this.#bounds !== null && InBox(this.#bounds, point)) {
+            return true;
+        }
+        return this.#openSubMenu !== undefined && this.#openSubMenu.#contains(point);
+    }
+
+    /**
+     * A submenu is anchored to its parent's left edge and told the parent's
+     * width, so it can open on whichever side has room.
+     */
+    public render(ctx: CanvasRenderingContext2D, anchor: Vector2, graphScale: number, mousePosition: Vector2 | undefined, openRight: boolean, parentWidth: number = 0): ContextEntry | null {
         const menuScale = 1.25;
         const scaledEntryHeight = menuScale * contextEntryHeight;
-        const scaledEntryWidth = (menuScale * 40) + (this.#getMaxWidthForText(ctx, menuScale)); // contextEntryWidth;
+        const scaledEntryWidth = (menuScale * 40) + (this.#getMaxWidthForText(ctx, menuScale));
 
         let totalScaledHeight = 0
         for (let i = 0; i < this.#groups.Count(); i++) {
@@ -271,23 +283,41 @@ export class ContextMenu {
         }
         totalScaledHeight *= menuScale;
 
-        const position = { x: 0, y: 0 };
-        CopyVector2(position, pppp)
+        const canvasWidth = ctx.canvas.clientWidth;
+        const position = { x: anchor.x, y: anchor.y };
+        let opensRight = openRight;
 
-        if (!openRight) {
-            position.x -= scaledEntryWidth;
+        if (parentWidth === 0) {
+            if (!openRight) {
+                position.x -= scaledEntryWidth;
+            }
+            if (openRight && position.x + scaledEntryWidth > canvasWidth) {
+                position.x = canvasWidth - scaledEntryWidth;
+                opensRight = false;
+            }
+        } else {
+            const rightOfParent = anchor.x + parentWidth;
+            const leftOfParent = anchor.x - scaledEntryWidth;
+            const fitsRight = rightOfParent + scaledEntryWidth <= canvasWidth;
+            const fitsLeft = leftOfParent >= 0;
+            opensRight = openRight ? (fitsRight || !fitsLeft) : (!fitsLeft && fitsRight);
+            position.x = opensRight ? rightOfParent : leftOfParent;
+            position.x = Math.max(0, Math.min(position.x, canvasWidth - scaledEntryWidth));
         }
 
-        // Clamp the position so it's not spilling off the canvas
         if (position.y + totalScaledHeight > ctx.canvas.clientHeight) {
             position.y = ctx.canvas.clientHeight - totalScaledHeight;
         }
+        position.y = Math.max(0, position.y);
 
-        let submenuOpenRight = openRight;
-        if (openRight && position.x + scaledEntryWidth > ctx.canvas.clientWidth) {
-            position.x = ctx.canvas.clientWidth - scaledEntryWidth;
-            submenuOpenRight = !submenuOpenRight;
-        }
+        this.#bounds = {
+            Position: { x: position.x, y: position.y },
+            Size: { x: scaledEntryWidth, y: totalScaledHeight },
+        };
+
+        const pointer = mousePosition !== undefined && this.#openSubMenu !== undefined && this.#openSubMenu.#contains(mousePosition)
+            ? undefined
+            : mousePosition;
 
         this.#tempBox.Size.x = scaledEntryWidth;
         this.#tempBox.Size.y = scaledEntryHeight;
@@ -305,13 +335,27 @@ export class ContextMenu {
             this.#tempBox.Position.y,
             scaledEntryWidth,
             totalScaledHeight,
-            5 * menuScale
+            Theme.ContextMenu.BorderRadius * menuScale
         );
         ctx.fill();
         ctx.shadowBlur = 0;
 
         let mouseIsOver: ContextEntry | null = null;
-        let subOpenedThisFrame = false;
+        if (pointer !== undefined) {
+            let row = 0;
+            for (let groupIndex = 0; groupIndex < this.#groups.Count(); groupIndex++) {
+                for (const entry of this.#groups.At(groupIndex).entries) {
+                    this.#tempBox.Position.y = position.y + (scaledEntryHeight * row);
+                    if (InBox(this.#tempBox, pointer)) {
+                        mouseIsOver = entry;
+                        this.#openSubMenu = entry.subMenu;
+                        this.#submenuPosition.x = position.x;
+                        this.#submenuPosition.y = this.#tempBox.Position.y;
+                    }
+                    row++;
+                }
+            }
+        }
 
         let optionsRendered = 0;
         for (let groupIndex = 0; groupIndex < this.#groups.Count(); groupIndex++) {
@@ -321,27 +365,13 @@ export class ContextMenu {
 
                 this.#tempBox.Position.y = position.y + (scaledEntryHeight * optionsRendered);
 
-                let entryMousedOver = false;
-                if (mousePosition !== undefined && InBox(this.#tempBox, mousePosition)) {
-                    mouseIsOver = entry;
-                    entryMousedOver = true
-                    if (entry.subMenu !== undefined) {
-                        this.#openSubMenu = entry.subMenu;
-                        this.#submenuPosition.x = position.x
-                        this.#submenuPosition.y = this.#tempBox.Position.y;
-                        if (submenuOpenRight) {
-                            this.#submenuPosition.x += scaledEntryWidth
-                        }
-                        subOpenedThisFrame = true;
-                    } else {
-                        this.#openSubMenu = undefined;
-                    }
-                }
+                const entryMousedOver = entry === mouseIsOver;
 
                 const itemDisabled = entry.item !== undefined
                     && entry.item.state() === ContextMenuItemState.Disabled;
 
-                if (!itemDisabled && (entryMousedOver || (this.#openSubMenu !== undefined && entry.subMenu === this.#openSubMenu))) {
+                const highlighted = !itemDisabled && (entryMousedOver || (this.#openSubMenu !== undefined && entry.subMenu === this.#openSubMenu));
+                if (highlighted) {
                     ctx.fillStyle = Theme.ContextMenu.HighlightColor;
                     ctx.beginPath();
                     ctx.roundRect(
@@ -349,7 +379,7 @@ export class ContextMenu {
                         this.#tempBox.Position.y + (scaledEntryHeight / 10),
                         scaledEntryWidth - (scaledEntryHeight / 5),
                         scaledEntryHeight - (scaledEntryHeight / 5),
-                        5 * menuScale
+                        Theme.ContextMenu.BorderRadius * menuScale
                     );
                     ctx.fill();
                 }
@@ -357,13 +387,15 @@ export class ContextMenu {
                 this.#textStyle.setupStyle(ctx, menuScale);
                 if (itemDisabled) {
                     ctx.fillStyle = Theme.ContextMenu.DisabledFontColor;
+                } else if (highlighted) {
+                    ctx.fillStyle = Theme.ContextMenu.HighlightFontColor;
                 }
                 ctx.fillText(entry.text, position.x + (scaledEntryHeight / 5), this.#tempBox.Position.y + (scaledEntryHeight / 2))
 
                 // Render arrows
                 if (entry.subMenu !== undefined) {
                     ctx.beginPath()
-                    ctx.strokeStyle = Theme.ContextMenu.FontColor;
+                    ctx.strokeStyle = highlighted ? Theme.ContextMenu.HighlightFontColor : Theme.ContextMenu.FontColor;
                     ctx.lineWidth = 1 * menuScale;
                     ctx.lineTo(position.x + scaledEntryWidth - (scaledEntryHeight / 2.5), this.#tempBox.Position.y + (scaledEntryHeight / 3))
                     ctx.lineTo(position.x + scaledEntryWidth - (scaledEntryHeight / 4), this.#tempBox.Position.y + (scaledEntryHeight / 2))
@@ -388,7 +420,7 @@ export class ContextMenu {
         }
 
         if (this.#openSubMenu !== undefined) {
-            const mouseOverSub = this.#openSubMenu.render(ctx, this.#submenuPosition, menuScale, mousePosition, submenuOpenRight)
+            const mouseOverSub = this.#openSubMenu.render(ctx, this.#submenuPosition, menuScale, mousePosition, opensRight, scaledEntryWidth)
             if (mouseOverSub !== null) {
                 mouseIsOver = mouseOverSub;
             }

package/src/graph.ts

@@ -23,17 +23,19 @@ import { Minimap, MinimapConfig } from './minimap';
 
 export type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;
 
-function BuildBackgroundRenderer(backgroundColor: string): GraphRenderer {
+function BuildBackgroundRenderer(backgroundColor: string | undefined): GraphRenderer {
     return (canvas: HTMLCanvasElement, context: CanvasRenderingContext2D, position: Vector2, scale: number): void => {
-        context.fillStyle = backgroundColor;
+        context.fillStyle = backgroundColor ?? Theme.Graph.BackgroundColor;
         context.fillRect(0, 0, canvas.width, canvas.height);
 
-        const alpha = Math.round(Clamp01(scale - 0.3) * 255)
+        const alpha = Clamp01(scale - 0.3);
         if (alpha <= 0) {
             return;
         }
 
-        context.fillStyle = `rgba(41, 54, 57, ${alpha})`;
+        context.save();
+        context.globalAlpha = alpha;
+        context.fillStyle = Theme.Graph.DotColor;
         const spacing = 100;
         const pi2 = 2 * Math.PI
         const dotScale = 2 * scale;
@@ -46,6 +48,7 @@ function BuildBackgroundRenderer(backgroundColor: string): GraphRenderer {
                 context.fill();
             }
         }
+        context.restore();
     }
 }
 
@@ -75,7 +78,7 @@ interface OpenQuickMenu {
     Position: Vector2
 }
 
-class GraphView {
+export class GraphView {
 
     #subsystems: Array<GraphSubsystem>;
 
@@ -138,9 +141,9 @@ class GraphView {
         const results: RenderResults = {};
         for (let i = 0; i < this.#subsystems.length; i++) {
             TimeExecution("Render_Subsystem_" + i, () => {
-                let results = this.#subsystems[i].render(ctx, camera, mousePosition);
-                if (results?.cursorStyle) {
-                    results.cursorStyle = results?.cursorStyle;
+                const layer = this.#subsystems[i].render(ctx, camera, mousePosition);
+                if (layer?.cursorStyle) {
+                    results.cursorStyle = layer.cursorStyle;
                 }
             })
         }
@@ -224,8 +227,7 @@ export class NodeFlowGraph {
         if (config?.backgroundRenderer !== undefined) {
             this.#backgroundRenderer = config?.backgroundRenderer
         } else {
-            const backgroundColor = config?.backgroundColor === undefined ? Theme.Graph.BackgroundColor : config.backgroundColor;
-            this.#backgroundRenderer = BuildBackgroundRenderer(backgroundColor);
+            this.#backgroundRenderer = BuildBackgroundRenderer(config?.backgroundColor);
         }
 
         this.#minimap = new Minimap(config?.minimap);

package/src/index.ts

@@ -4,8 +4,9 @@ export * from './node';
 import { ContextMenuConfig, ContextMenuItemConfig, ContextMenuItemState } from './contextMenu';
 export { ContextMenuConfig, ContextMenuItemConfig, ContextMenuItemState };
 
-import { Theme } from './theme';
-export { Theme };
+import { Theme, DefaultTheme, setTheme, themeVersion, onThemeChange, ThemeConfig, ThemeValues, BevelColors } from './theme';
+export { Theme, DefaultTheme, setTheme, themeVersion, onThemeChange };
+export type { ThemeConfig, ThemeValues, BevelColors };
 
 import { Publisher, PublisherConfig } from './nodes/publisher';
 export { Publisher, PublisherConfig };
@@ -53,30 +54,43 @@ import { NodeCreatedCallback, NodeFactory, NodeFactoryConfig } from './nodes/fac
 export { NodeCreatedCallback, NodeFactory, NodeFactoryConfig };
 
 // Widgets
-import { Widget } from './widgets/widget';
-import { NumberWidget, NumberWidgetConfig } from './widgets/number';
+import { Widget, WidgetBase, WidgetPointer } from './widgets/widget';
+import { ValueWidget, ValueWidgetConfig } from './widgets/value';
+import { NumberWidget, NumberWidgetConfig, formatNumber } from './widgets/number';
 import { ColorWidget, ColorWidgetConfig } from './widgets/color';
 import { StringWidget, StringWidgetConfig } from './widgets/string';
 import { TextWidget, TextWidgetConfig } from './widgets/text';
 import { ButtonWidget, ButtonWidgetConfig } from './widgets/button';
-import { ToggleWidget, ToggleWidgetConfig, ToggleStyleConfig } from './widgets/toggle';
+import { ToggleWidget, ToggleWidgetConfig } from './widgets/toggle';
 import { SliderWidget, SliderWidgetConfig } from './widgets/slider';
 import { ImageWidget, ImageWidgetConfig } from './widgets/image';
+import { RowWidget, RowWidgetConfig } from './widgets/row';
+import { drawField, drawFieldBox, drawFieldText, FieldLook, widgetFont } from './widgets/field';
+import { editInPlace, InPlaceEditConfig } from './widgets/inplace';
 export {
-    Widget,
+    WidgetBase, ValueWidget,
     NumberWidget, ColorWidget, StringWidget, TextWidget,
-    ButtonWidget, ToggleWidget, SliderWidget, ImageWidget
+    ButtonWidget, ToggleWidget, SliderWidget, ImageWidget, RowWidget,
+    drawField, drawFieldBox, drawFieldText, widgetFont, editInPlace, formatNumber,
 };
 export type {
+    Widget, WidgetPointer, ValueWidgetConfig, FieldLook, InPlaceEditConfig,
     NumberWidgetConfig, ColorWidgetConfig, StringWidgetConfig, TextWidgetConfig,
-    ButtonWidgetConfig, ToggleWidgetConfig, ToggleStyleConfig, SliderWidgetConfig,
-    ImageWidgetConfig
+    ButtonWidgetConfig, ToggleWidgetConfig, SliderWidgetConfig,
+    ImageWidgetConfig, RowWidgetConfig,
 };
 
-import { GlobalWidgetFactory, WidgetBuilder, WidgetFactory } from './widgets/factory';
+import {
+    GlobalWidgetFactory, WidgetBuilder, WidgetFactory,
+    WidgetConfig, WidgetConfigs, WidgetTypes, RowWidgetFactoryConfig,
+} from './widgets/factory';
 export { GlobalWidgetFactory, WidgetFactory };
-export type { WidgetBuilder };
+export type { WidgetBuilder, WidgetConfig, WidgetConfigs, WidgetTypes, RowWidgetFactoryConfig };
+
+import { CursorStyle } from './styles/cursor';
+export { CursorStyle };
 
-import { Box } from './types/box';
+import { Box, InBox } from './types/box';
 import { Vector2 } from './types/vector2';
+export { InBox };
 export type { Box, Vector2 };

package/src/markdown/entry.ts

@@ -82,28 +82,26 @@ export class CodeBlockEntry {
     render(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, maxWidth: number): number {
         this.#calculateLayout(ctx, maxWidth);
 
-        let padding = Theme.Note.CodeBlock.Padding * scale;
+        const padding = Theme.Note.CodeBlock.Padding * scale;
+        const lineCount = this.#calculatedEntries.Count();
+        const lastTop = lineCount === 0 ? 0 : this.#calculatedPositions.At(lineCount - 1).y;
+        const contentHeight = lineCount === 0 ? 0 : (lastTop + this.#text.style().getSize()) * scale;
+        const height = contentHeight + (padding * 2);
 
-        let max = 0;
-        for (let i = 0; i < this.#calculatedEntries.Count(); i++) {
-            const pos = this.#calculatedPositions.At(i);
-            max = Math.max(max, pos.y * scale)
-        }
-
-        const y = position.y + max + (scale * 5)
         ctx.fillStyle = Theme.Note.CodeBlock.BackgroundColor;
         ctx.beginPath();
         ctx.roundRect(
             position.x,
             position.y,
             maxWidth * scale,
-            max + (padding * 2),
+            height,
             Theme.Note.CodeBlock.BorderRadius * scale
         );
         ctx.fill();
 
-
-        for (let i = 0; i < this.#calculatedEntries.Count(); i++) {
+        const baseline = ctx.textBaseline;
+        ctx.textBaseline = "top";
+        for (let i = 0; i < lineCount; i++) {
             const entry = this.#calculatedEntries.At(i);
             const pos = this.#calculatedPositions.At(i);
 
@@ -111,12 +109,10 @@ export class CodeBlockEntry {
                 x: (pos.x * scale) + position.x + padding,
                 y: (pos.y * scale) + position.y + padding
             });
-
-            max = Math.max(max, pos.y * scale)
         }
+        ctx.textBaseline = baseline;
 
-
-        return max + (padding * 2);
+        return height;
     }
 }
 

package/src/markdown/syntaxParser.ts

@@ -314,9 +314,10 @@ export class MarkdownSyntaxParser {
         this.#inc(); // puts us on the 3rd
         this.#inc(); // puts us on the next token
 
-        const codeBlockText = this.#originalText.substring(start as number, end);
+        const codeBlockText = this.#originalText.substring(start as number, end).replace(/\r?\n$/, "");
         const entryText = new Text(codeBlockText);
         this.#assignStandardStyling([entryText])
+        entryText.setColor(Theme.Note.CodeBlock.FontColor);
         return new CodeBlockEntry(entryText)
     }