@elicdavis/node-flow 0.1.1 → 0.1.3

package/esbuild.ts

@@ -5,7 +5,7 @@ const buildOptsWeb: BuildOptions = {
   outfile: './dist/web/NodeFlow.js',
   platform: 'browser',
   target: ['esNext'],
-  //   format: 'cjs',
+  format: 'esm',
   bundle: true,
   sourcemap: true,
   minify: true,

package/index.html

@@ -27,13 +27,13 @@
         }
     </style>
 
-    <script src="./dist/index.mjs" type="module"></script>
+    <script src="./dist/web/NodeFlow.js" type="module"></script>
 </head>
 
 <body>
     <canvas id="canvas"></canvas>
     <script type="module">
-        import { Theme, FlowNode, NodeFlowGraph, FlowNote } from "./dist/index.mjs";
+        import { Theme, FlowNode, NodeFlowGraph, FlowNote } from "./dist/web/NodeFlow.js";
 
         const canvas = document.getElementById("canvas");
         Theme.FontFamily = "Source Code Pro";
@@ -203,7 +203,11 @@ let node = new FlowNode({
         { 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 @@ node.addOutput({ name: "sum", type: "float32" })
 
         var sumNode = new FlowNode({
             position: {
-                x: 850,
-                y: 600
+                x: 750,
+                y: 700
             },
             title: "Add",
             info: "I add two numbers",
@@ -231,14 +235,14 @@ node.addOutput({ name: "sum", type: "float32" })
                 { 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 @@ node.addOutput({ name: "sum", type: "float32" })
 
         var bNode = new FlowNode({
             position: {
-                x: 550,
+                x: 450,
                 y: 650
             },
             title: "Number",
@@ -280,17 +284,17 @@ node.addOutput({ name: "sum", type: "float32" })
 
         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/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.3",
   "license": "MIT",
   "keywords": [
     "nodes",

package/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 {

package/src/elements/text.ts

@@ -17,6 +17,7 @@ export enum VerticalAlign {
 export interface TextElementStyling extends RenderElementBaseStyling {
     Align?: TextAlign
     VerticalAlign?: VerticalAlign
+    LineHeight?: number
 }
 
 export class TextElement extends RenderElementBase {
@@ -26,16 +27,19 @@ export class TextElement extends RenderElementBase {
 
     #verticalAlign: VerticalAlign;
 
+    #lineHeight: number;
+
     constructor(text: Text, styling?: TextElementStyling) {
         super(styling);
         this.#text = text;
         this.#align = styling?.Align ?? TextAlign.Left;
         this.#verticalAlign = styling?.VerticalAlign ?? VerticalAlign.Top;
+        this.#lineHeight = styling?.LineHeight ?? 1;
     }
 
     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 +81,34 @@ 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 += this.#text.style().getSize() * this.#lineHeight
+            }
+        }
     }
 
-    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 = this.#text.style().getSize() * eles.length * this.#lineHeight;
+        for (let i = 0; i < eles.length; i++) {
+            eles[i].size(ctx, 1, tempSize)
+            out.x = Math.max(tempSize.x, out.x);
+        }
     }
 }

package/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,44 @@ 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: 16 },
+                    MaxWidth: 400,
+                    LineHeight: 1.5
+                }
+            ));
+        }
+
+        this.#dataTypePopupElement = new ContainerRenderElement(
+            containerElements,
+            {
+                BackgroundColor: "rgba(0, 0, 0, 0.75)",
+                Border: {
+                    Radius: 6,
+                },
+                Padding: 13,
+            }
+        );
     }
 
     addConnection(connection: Connection): void {
@@ -183,20 +228,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)
             })
         }