node messages, multiline text

Author: EliCDavis

index.html

@@ -296,6 +296,15 @@
             outputs: [
                 { name: "sum", type: "float32", description: "The sum of all connected nodes to our 'numbers' port" }
             ],
+            messages: [
+                {
+                    message: "I am a message attatched to the node"
+                },
+                {
+                    message: "I am another message attatched to the node with type \"error\"",
+                    type: "error"
+                }
+            ],
         });
 
         graph.addNode(sumNode)

package.json

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

src/graph.ts

@@ -21,7 +21,7 @@ import { QuickMenu } from './quickMenu';
 export type GraphRenderer = (canvas: HTMLCanvasElement, ctx: CanvasRenderingContext2D, position: Vector2, scale: number) => void;
 
 function BuildBackgroundRenderer(backgroundColor: string): GraphRenderer {
-    return (canvas: HTMLCanvasElement, context: CanvasRenderingContext2D, position: Vector2, scale: number) => {
+    return (canvas: HTMLCanvasElement, context: CanvasRenderingContext2D, position: Vector2, scale: number): void => {
         context.fillStyle = backgroundColor;
         context.fillRect(0, 0, canvas.width, canvas.height);
 

src/node.ts

@@ -56,11 +56,39 @@ export interface FlowNodeStyle {
     portText?: TextStyleConfig;
 }
 
+export enum MessageType {
+    Info = "info",
+    Warning = "warning",
+    Error = "error"
+};
+
+function MessageTypeColor(messageType: MessageType): string {
+    switch (messageType) {
+        case MessageType.Info:
+            return Theme.Node.Message.InfoColor;
+
+        case MessageType.Warning:
+            return Theme.Node.Message.WarnColor;
+
+        case MessageType.Error:
+            return Theme.Node.Message.ErrorColor;
+
+        default:
+            throw new Error(`unrecognized message type ${messageType}`)
+    }
+}
+
+export interface NodeMessageConfig {
+    message: string;
+    type?: MessageType;
+}
+
 export interface FlowNodeConfig {
     position?: Vector2;
     title?: string;
     subTitle?: string;
     info?: string;
+    messages?: Array<NodeMessageConfig>
     locked?: boolean;
     data?: Metadata;
     contextMenu?: ContextMenuConfig;
@@ -111,6 +139,29 @@ export interface NodeIntersection {
 
 }
 
+class MessageRenderer {
+
+    #text: Text;
+
+    constructor(config: NodeMessageConfig) {
+        this.#text = new Text(config.message,
+            {
+                color: MessageTypeColor(config.type ? config.type : MessageType.Info),
+            },
+            {
+                LineSpacing: 2.5,
+                MaxWidth: 200
+            }
+        );
+    }
+
+    render(ctx: CanvasRenderingContext2D, scale: number, position: Vector2): number {
+        ctx.textAlign = TextAlign.Center;
+        this.#text.render(ctx, scale, position);
+        return this.#text.height(ctx) * scale;
+    }
+}
+
 export class FlowNode {
 
     #position: Vector2;
@@ -123,6 +174,8 @@ export class FlowNode {
 
     #infoText: string;
 
+    #messages: Array<MessageRenderer>
+
     #input: Array<Port>;
 
     #output: Array<Port>;
@@ -203,6 +256,14 @@ export class FlowNode {
         this.#contextMenu = config?.contextMenu === undefined ? null : config.contextMenu;
         this.#metadata = config?.metadata;
 
+        this.#messages = [];
+        if (config?.messages) {
+            for (let i = 0; i < config.messages.length; i++) {
+                const message = config.messages[i];
+                this.#messages.push(new MessageRenderer(message));
+            }
+        }
+
         this.#selected = false;
         this.#onSelect = new Array<() => void>();
         this.#onUnselect = new Array<() => void>();
@@ -879,7 +940,6 @@ export class FlowNode {
             console.warn("setInfo instruction ignored, as node has been marked un-editable");
         }
 
-
         let cleaned = newInfo;
         if (cleaned === null || cleaned === undefined) {
             cleaned = "";
@@ -935,6 +995,14 @@ export class FlowNode {
         return boxStyle;
     }
 
+    addMessage(message: NodeMessageConfig): void {
+        this.#messages.push(new MessageRenderer(message));
+    }
+
+    clearMessages(): void {
+        this.#messages = [];
+    }
+
     render(ctx: CanvasRenderingContext2D, camera: Camera, state: NodeState, mousePosition: Vector2 | undefined, postProcess: PassSubsystem): void {
         VectorPool.run(() => {
             const tempMeasurement = VectorPool.get();
@@ -1113,6 +1181,7 @@ export class FlowNode {
                 startY += tempMeasurement.y + scaledElementSpacing;
             }
 
+            // Widgets
             for (let i = 0; i < this.#widgets.length; i++) {
                 const widget = this.#widgets[i];
                 const widgetSize = widget.Size();
@@ -1125,6 +1194,15 @@ export class FlowNode {
                 this.#widgetPositions.Push(widget.Draw(ctx, position, camera.zoom, mousePosition));
                 startY += (widgetSize.y * camera.zoom) + scaledElementSpacing;
             }
+
+            // Messages
+            const messageStart = VectorPool.get();
+            messageStart.x = nodeBounds.Position.x + (nodeBounds.Size.x / 2);
+            messageStart.y = nodeBounds.Position.y + nodeBounds.Size.y + (15 * camera.zoom);
+            for (let i = 0; i < this.#messages.length; i++) {
+                const message = this.#messages[i];
+                messageStart.y += message.render(ctx, camera.zoom, messageStart) + (10 * camera.zoom);
+            }
         })
     }
 }

src/theme.ts

@@ -20,6 +20,11 @@ export const Theme = {
         },
         Port: {
             FontColor: "#afb9bb"
+        },
+        Message: {
+            InfoColor: "#afb9bb",
+            WarnColor: "#f1f663ff",
+            ErrorColor: "#FF0000"
         }
     },
     BoxSelect: {

src/types/text.ts

@@ -2,6 +2,11 @@ import { FontWeight, TextStyle, TextStyleConfig } from "../styles/text";
 import { splitString, splitStringIntoLines } from "../utils/string";
 import { CopyVector2, ScaleVector, Vector2, Zero } from "./vector2";
 
+export interface MultilineTextConfig {
+    MaxWidth?: number;
+    LineSpacing?: number;
+}
+
 export class Text {
 
     #measured: boolean
@@ -12,11 +17,20 @@ export class Text {
 
     #value: string
 
-    constructor(value: string, style?: TextStyleConfig) {
+    #maxWidth: number;
+
+    #lineSpacing: number;
+
+    #textToRender: Array<string>;
+
+    constructor(value: string, style?: TextStyleConfig, config?: MultilineTextConfig) {
         this.#value = value;
         this.#measured = false;
         this.#size = Zero();
         this.#style = new TextStyle(style);
+        this.#maxWidth = config?.MaxWidth ? config?.MaxWidth : -1;
+        this.#lineSpacing = config?.LineSpacing ? config?.LineSpacing : 5;
+        this.#textToRender = [value];
 
         if (!document.fonts.check(`16px "${this.#style.getFont()}"`)) {
             document.fonts.addEventListener("loadingdone", (event) => {
@@ -96,10 +110,28 @@ export class Text {
             return;
         }
 
+
         this.#style.setupStyle(ctx, 1);
-        const measurements = ctx.measureText(this.#value);
-        this.#size.x = measurements.width;
-        this.#size.y = measurements.actualBoundingBoxAscent + measurements.actualBoundingBoxDescent;
+
+        if (this.#maxWidth == -1) {
+            const measurements = ctx.measureText(this.#value);
+            this.#size.x = measurements.width;
+            this.#size.y = measurements.actualBoundingBoxAscent + measurements.actualBoundingBoxDescent;
+            this.#textToRender = [this.#value];
+            this.#measured = true;
+            return;
+        }
+
+        this.#textToRender = splitStringIntoLines(ctx, this.#value, this.#maxWidth);
+
+        this.#size.x = 0;
+        this.#size.y = 0;
+        for (let i = 0; i < this.#textToRender.length; i++) {
+            const measurements = ctx.measureText(this.#textToRender[i]);
+            this.#size.x = Math.max(this.#size.x, measurements.width);
+        }
+
+        this.#size.y += ((this.#textToRender.length - 1) * this.#lineSpacing) + (this.#style.getSize() * this.#textToRender.length);
         this.#measured = true;
     }
 
@@ -109,10 +141,15 @@ export class Text {
         ScaleVector(out, scale);
     }
 
+    height(ctx: CanvasRenderingContext2D): number {
+        this.#measure(ctx);
+        return this.#size.y;
+    }
+
     setColor(color: string): void {
         this.#style.setColor(color);
     }
-    
+
     getColor(): string {
         return this.#style.getColor();
     }
@@ -126,8 +163,17 @@ export class Text {
     }
 
     render(ctx: CanvasRenderingContext2D, scale: number, position: Vector2): void {
-        this.#style.setupStyle(ctx, scale)
-        ctx.fillText(this.#value, position.x, position.y);
+        this.#measure(ctx);
+        this.#style.setupStyle(ctx, scale);
+        let yOffset = 0;
+        for (let i = 0; i < this.#textToRender.length; i++) {
+            ctx.fillText(
+                this.#textToRender[i],
+                position.x,
+                position.y + yOffset
+            );
+            yOffset += (this.#style.getSize() + this.#lineSpacing) * scale
+        }
     }
 
     style(): TextStyle {