port descriptions and rendering

Author: EliCDavis

index.html

@@ -203,7 +203,11 @@
         { name: "b", type: "float32" }
     ],
      outputs: [
-        { name: "sum", type: "float32" }
+        { 
+            name: "sum", 
+            type: "float32", 
+            description: "The sum of a and b"
+        }
     ],
 });
 graph.addNode(node);
@@ -221,8 +225,8 @@
 
         var sumNode = new FlowNode({
             position: {
-                x: 850,
-                y: 600
+                x: 750,
+                y: 700
             },
             title: "Add",
             info: "I add two numbers",
@@ -231,14 +235,14 @@
                 { name: "b", type: "float32" }
             ],
             outputs: [
-                { name: "sum", type: "float32" }
+                { name: "sum", type: "float32", description: "The sum of a and b" }
             ],
         });
 
 
         var aNode = new FlowNode({
             position: {
-                x: 550,
+                x: 450,
                 y: 500
             },
             title: "Number",
@@ -256,7 +260,7 @@
 
         var bNode = new FlowNode({
             position: {
-                x: 550,
+                x: 450,
                 y: 650
             },
             title: "Number",
@@ -280,17 +284,17 @@
 
         const arrNode = new FlowNode({
             position: {
-                x: 1050,
-                y: 600
+                x: 950,
+                y: 700
             },
             title: "Add",
             subTitle: "Array Inputs",
             info: "This node contains a port that can take multiple input nodes at once, which can be useful for operations that can operate on [0,n] data sizes",
             inputs: [
-                { name: "numbers", type: "float32", array: true },
+                { name: "numbers", type: "float32", array: true, description: "All numbers to add together" },
             ],
             outputs: [
-                { name: "sum", type: "float32" }
+                { name: "sum", type: "float32", description: "The sum of all connected nodes to our 'numbers' port" }
             ],
         });
 

package.json

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

src/elements/base.ts

@@ -107,6 +107,7 @@ export abstract class RenderElementBase implements IRenderElement {
         this.doRender(ctx, offsetPosition, graphScale, elementSize);
     }
 
+    // todo: Remove limitations argument?
     abstract calcSize(ctx: CanvasRenderingContext2D, out: Vector2, limitations: Vector2): void;
 
     protected maxLimitations(out: Vector2): void {

src/elements/text.ts

@@ -35,7 +35,7 @@ export class TextElement extends RenderElementBase {
 
     doRender(ctx: CanvasRenderingContext2D, position: Vector2, graphScale: number, scaledFillableSpace: Vector2): void {
         const scale = Zero();
-        this.calcSize(ctx, scale);
+        this.calcSize(ctx, scale, scaledFillableSpace);
         ScaleVector(scale, graphScale);
 
         const justifiedPosition = Zero();
@@ -77,10 +77,38 @@ export class TextElement extends RenderElementBase {
             default:
                 throw new Error("unimplemented justification: " + this.#align);
         }
-        this.#text.render(ctx, graphScale, justifiedPosition);
+
+        if (scaledFillableSpace.x <= 0) {
+            this.#text.render(ctx, graphScale, justifiedPosition);
+        } else {
+            const eles = this.#text.breakIntoLines(ctx, scaledFillableSpace.x);
+
+            const tempSize = { x: 0, y: 0 };
+            for (let i = 0; i < eles.length; i++) {
+                eles[i].render(ctx, graphScale, justifiedPosition);
+                eles[i].size(ctx, 1, tempSize)
+                justifiedPosition.y += tempSize.y
+            }
+        }
     }
 
-    calcSize(ctx: CanvasRenderingContext2D, out: Vector2): void {
-        this.#text.size(ctx, 1, out);
+    calcSize(ctx: CanvasRenderingContext2D, out: Vector2, limitations: Vector2): void {
+
+        if (limitations.x <= 0) {
+            this.#text.size(ctx, 1, out);
+            return;
+        }
+
+        const eles = this.#text.breakIntoLines(ctx, limitations.x);
+
+        const tempSize = { x: 0, y: 0 };
+        out.x = 0;
+        out.y = 0;
+        for (let i = 0; i < eles.length; i++) {
+            eles[i].size(ctx, 1, tempSize)
+            out.x = Math.max(tempSize.x, out.x);
+            out.y += tempSize.y
+        }
+
     }
 }

src/port.ts

@@ -1,11 +1,15 @@
 import { Camera } from "./camera";
 import { Connection } from './connection';
+import { RenderElementBase } from "./elements/base";
+import { ContainerRenderElement, AlignItems } from './elements/container';
+import { TextAlign, TextElement } from "./elements/text";
 import { FlowNode } from "./node";
 import { PassSubsystem } from "./pass/subsystem";
-import { TextAlign } from "./styles/canvasTextAlign";
-import { Box, BoxIntersection, InBox } from "./types/box";
+import { FontStyle } from "./styles/text";
+import { Box, InBox } from "./types/box";
+import { Text } from "./types/text";
 import { Vector2 } from "./types/vector2";
-import { Color, HSV, HSV2RGB, RgbToHex } from "./utils/color";
+import { Color, HSV, HSV2RGB, RgbToHex } from './utils/color';
 
 export enum PortType {
     Input = "INPUT",
@@ -25,6 +29,7 @@ type ConnectionChangeCallback = (connection: Connection, connectionIndex: number
 export interface PortConfig {
     name?: string;
     type?: string;
+    description?: string;
     array?: boolean;
     emptyStyle?: PortStyle;
     filledStyle?: PortStyle;
@@ -64,9 +69,11 @@ export class Port {
 
     #dataType: string;
 
+    #dataTypePopupElement: RenderElementBase;
+
     #onConnectionAdded: Array<ConnectionChangeCallback>;
 
-    #onConnectionRemoved: Array<ConnectionChangeCallback>;;
+    #onConnectionRemoved: Array<ConnectionChangeCallback>;
 
     constructor(node: FlowNode, portType: PortType, config?: PortConfig) {
         this.#node = node;
@@ -98,6 +105,43 @@ export class Port {
         if (config?.onConnectionRemoved) {
             this.#onConnectionRemoved.push(config?.onConnectionRemoved);
         }
+
+        const containerElements = new Array<RenderElementBase>();
+        let dataTypeDisplay = this.#dataType;
+        if (config?.array === true) {
+            dataTypeDisplay = "Array<" + dataTypeDisplay + ">"
+        }
+        containerElements.push(new TextElement(
+            new Text(dataTypeDisplay, {
+                color: "white",
+            }),
+            {
+                Align: TextAlign.Center,
+            }
+        ));
+
+        const description = config?.description;
+        if (description && description !== "") {
+            containerElements.push(new TextElement(
+                new Text(description, { color: "white", style: FontStyle.Italic }),
+                {
+                    Align: TextAlign.Center,
+                    Padding: { Top: 8 },
+                    MaxWidth: 300
+                }
+            ));
+        }
+
+        this.#dataTypePopupElement = new ContainerRenderElement(
+            containerElements,
+            {
+                BackgroundColor: "rgba(0, 0, 0, 0.75)",
+                Border: {
+                    Radius: 6,
+                },
+                Padding: 13,
+            }
+        );
     }
 
     addConnection(connection: Connection): void {
@@ -183,20 +227,12 @@ export class Port {
             const xPos = position.x;
             const yPos = position.y;
 
+            // TODO: Make it so we're not creating a new lambda each frame
             postProcess.queue(() => {
-                ctx.textAlign = TextAlign.Center;
-
-                const padding = 13;
-                const measurement = ctx.measureText(this.#dataType)
-                const w = measurement.width + (padding * camera.zoom);
-
-                ctx.beginPath();
-                ctx.fillStyle = "rgba(0, 0, 0, 0.75)";
-                ctx.roundRect(xPos - w / 2, yPos + (scaledRadius * 3) - (padding * camera.zoom), w, (padding * 2) * camera.zoom, 4 * camera.zoom);
-                ctx.fill();
-
-                ctx.fillStyle = "#FFFFFF";
-                ctx.fillText(this.#dataType, xPos, yPos + (scaledRadius * 3));
+                const size = { x: 0, y: 0 }
+                this.#dataTypePopupElement.calcSize(ctx, size, { x: -1, y: -1 });
+                // size.x = Math.min(150, size.x)
+                this.#dataTypePopupElement.render(ctx, { x: xPos - (size.x / 2), y: yPos }, 1, size)
             })
         }