@elicdavis/node-flow 0.1.0

package/src/theme.ts

@@ -0,0 +1,78 @@
+export const Theme = {
+    FontFamily: "Courier New",
+    Graph: {
+        BackgroundColor: "#07212a",
+    },
+    Node: {
+        FontColor: "#afb9bb",
+        BackgroundColor: "#0c2b35",
+        Title: {
+            Color: "#154050",
+            FontColor: "#afb9bb",
+            Padding: 5
+        },
+        BorderRadius: 15,
+        Border: {
+            Idle: "#1c1c1c",
+            MouseOver: "#8e8e8e",
+            Grabbed: "white",
+            Selected: "#6e6e6e"
+        },
+        Port: {
+            FontColor: "#afb9bb"
+        }
+    },
+    BoxSelect: {
+        Color: "white",
+        Size: 1,
+        Radius: 2,
+        LineDashLength: 5,
+    },
+    Widget: {
+        FontColor: "#afb9bb",
+        BackgroundColor: "#0f313c",
+        Border: {
+            Color: "#154050",
+            Size: 2,
+            Radius: 2
+        },
+        Hover: {
+            BackgroundColor: "#195366"
+        },
+        Slider: {
+            FillColor: "#07212A",
+        },
+        Button: {
+            Click: {
+                BackgroundColor: "#1f637a"
+            },
+        }
+    },
+    ContextMenu: {
+        BackgroundColor: "#07212A",
+        HighlightColor: "#205A6D",
+        FontColor: "#afb9bb",
+    },
+    Note: {
+        FontColor: "#afb9bb",
+        FontSize: 16,
+        EntrySpacing: 20,
+        LineSpacing: 5,
+        DotSize: 3,
+        HeaderLineWidth: 2,
+        H1: {
+            FontSize: 32,
+        },
+        H2: {
+            FontSize: 16,
+        },
+        H3: {
+            FontSize: 16,
+        },
+        CodeBlock: {
+            BackgroundColor: "#0c2b35",
+            Padding: 16,
+            BorderRadius: 4,
+        }
+    }
+}

package/src/types/box.ts

@@ -0,0 +1,126 @@
+import { VectorPool } from "./pool";
+import { AddVector2, CopyVector2, SubVector2, Vector2, Zero } from "./vector2";
+
+export interface Box {
+    Position: Vector2
+    Size: Vector2
+}
+
+export function CopyBox(dst: Box, src: Box): void {
+    dst.Position.x = src.Position.x;
+    dst.Position.y = src.Position.y;
+    dst.Size.x = src.Size.x;
+    dst.Size.y = src.Size.y;
+}
+
+function normalizeMinMax(min: Vector2, max: Vector2) {
+    if (min.x > max.x) {
+        let temp = max.x;
+        max.x = min.x;
+        min.x = temp;
+    }
+
+    if (min.y > max.y) {
+        let temp = max.y;
+        max.y = min.y;
+        min.y = temp;
+    }
+}
+
+export function BoxIntersection(a: Box, b: Box): boolean {
+    let intersects = false;
+
+    VectorPool.run(() => {
+        const aMin = VectorPool.get();
+        const aMax = VectorPool.get();
+        CopyVector2(aMin, a.Position);
+        AddVector2(aMax, aMin, a.Size);
+        normalizeMinMax(aMin, aMax);
+
+        const bMin = VectorPool.get();
+        const bMax = VectorPool.get();
+        CopyVector2(bMin, b.Position);
+        AddVector2(bMax, bMin, b.Size);
+        normalizeMinMax(bMin, bMax);
+
+        intersects = (aMin.x <= bMax.x) && (aMax.x >= bMin.x) &&
+            (aMin.y <= bMax.y) && (aMax.y >= bMin.y);
+    })
+
+    return intersects;
+}
+
+// TODO: This is probably incorrect. Needs more testing
+// export function ExpandBox(boxToExpand: Box, box: Box): void {
+//     const newPos: Vector2 = Zero();
+//     const newSize: Vector2 = Zero();
+
+//     CopyVector2(newPos, boxToExpand.Position);
+//     CopyVector2(newSize, boxToExpand.Size);
+
+
+//     const positionOffset: Vector2 = Zero();
+
+//     // Get Position Adjustment
+//     SubVector2(positionOffset, box.Position, boxToExpand.Position);
+
+//     // We only care about adjustments that make us bigger.
+//     positionOffset.x = Math.min(positionOffset.x, 0);
+//     positionOffset.y = Math.min(positionOffset.y, 0);
+
+//     // Adjust our position 
+//     AddVector2(boxToExpand.Position, boxToExpand.Position, positionOffset);
+
+//     // Increase our size to take into account new position
+//     SubVector2(newSize, newSize, positionOffset);
+
+//     const sizeIncrease: Vector2 = Zero();
+
+//     const curEndPos: Vector2 = {
+//         x: boxToExpand.Position.x + boxToExpand.Size.x,
+//         y: boxToExpand.Position.y + boxToExpand.Size.y,
+//     };
+
+//     const boxEndPos: Vector2 = {
+//         x: box.Position.x + box.Size.x,
+//         y: box.Position.y + box.Size.y,
+//     };
+
+//     SubVector2(sizeIncrease, boxEndPos, curEndPos);
+
+//     // We only care about increases to our size
+//     sizeIncrease.x = Math.max(sizeIncrease.x, 0);
+//     sizeIncrease.y = Math.max(sizeIncrease.y, 0);
+
+//     // Increase our size to take into account new position
+//     SubVector2(newSize, newSize, sizeIncrease)
+
+//     // Finally, Set result
+//     CopyVector2(boxToExpand.Position, newPos)
+//     CopyVector2(boxToExpand.Size, newSize)
+// }
+
+export function BoxCenter(box: Box, out: Vector2): Vector2 {
+    out.x = box.Position.x + (box.Size.x / 2);
+    out.y = box.Position.y + (box.Size.y / 2);
+    return out
+}
+
+export function InBox(box: Box, position: Vector2): boolean {
+    const min = box.Position
+    if (position.x < min.x) {
+        return false
+    }
+    if (position.y < min.y) {
+        return false
+    }
+
+    if (position.x > min.x + box.Size.x) {
+        return false
+    }
+    if (position.y > min.y + box.Size.y) {
+        return false
+    }
+
+    return true
+}

package/src/types/list.ts

@@ -0,0 +1,41 @@
+export class List<Type> {
+
+    #arr: Array<Type>;
+
+    #count: number;
+
+    constructor() {
+        this.#arr = new Array<Type>();
+        this.#count = 0;
+    }
+
+    public Count(): number {
+        return this.#count;
+    }
+
+    public Clear(): void {
+        this.#count = 0;
+    }
+
+    public At(index: number): Type {
+        return this.#arr[index];
+    }
+
+    public Push(value: Type): void {
+        if (this.#arr.length === this.#count) {
+            this.#arr.push(value);
+        } else {
+            this.#arr[this.#count] = value;
+        }
+        this.#count++;
+    }
+
+    public ToArray(): Array<Type> {
+        let arr = new Array<Type>(this.Count());
+        for(let i = 0; i < this.#count; i ++) {
+            arr[i] = this.#arr[i]
+        }
+        return arr;
+    }
+
+}

package/src/types/pool.ts

@@ -0,0 +1,66 @@
+import { Vector2 } from "./vector2";
+
+
+
+export class Pool<Type> {
+
+    #arr: Array<Type>;
+
+    #count: number;
+
+    #builder: () => Type;
+
+    #reset: (v: Type) => void;
+
+    #runningDepth: number;
+
+    constructor(builder: () => Type, reset: (v: Type) => void) {
+        this.#arr = new Array<Type>();
+        this.#count = 0;
+        this.#builder = builder;
+        this.#reset = reset;
+        this.#runningDepth = 0;
+    }
+
+    public runIf(condition: boolean, fn: () => void) {
+        if (condition) {
+            this.run(fn);
+        }
+    }
+
+    #running(): boolean {
+        return this.#runningDepth > 0;
+    }
+
+    public run(fn: () => void) {
+        const start = this.#count;
+        this.#runningDepth += 1;
+        fn();
+        this.#runningDepth -= 1;
+        this.#count = start;
+        // console.log(this.#arr.length);
+    }
+
+    get(): Type {
+        if(!this.#running()) {
+            throw new Error("can't use pool outside of running context");
+        }
+
+        let value: Type;
+        if (this.#arr.length === this.#count) {
+            value = this.#builder();
+            this.#arr.push(this.#builder());
+        } else {
+            value = this.#arr[this.#count];
+            this.#reset(value);
+        }
+        this.#count++;
+        return value;
+    }
+
+}
+
+export const VectorPool = new Pool<Vector2>(
+    () => ({ x: 0, y: 0 }),
+    (v) => { v.x = 0; v.y = 0; }
+)

package/src/types/text.ts

@@ -0,0 +1,136 @@
+import { FontWeight, TextStyle, TextStyleConfig } from "../styles/text";
+import { splitString, splitStringIntoLines } from "../utils/string";
+import { CopyVector2, ScaleVector, Vector2, Zero } from "./vector2";
+
+export class Text {
+
+    #measured: boolean
+
+    #size: Vector2;
+
+    #style: TextStyle;
+
+    #value: string
+
+    constructor(value: string, style?: TextStyleConfig) {
+        this.#value = value;
+        this.#measured = false;
+        this.#size = Zero();
+        this.#style = new TextStyle(style);
+
+        if (!document.fonts.check(`16px "${this.#style.getFont()}"`)) {
+            document.fonts.addEventListener("loadingdone", (event) => {
+                this.#measured = false;
+            });
+        }
+    }
+
+    set(newValue: string): void {
+        this.#value = newValue;
+        this.#measured = false;
+    }
+
+    get(): string {
+        return this.#value;
+    }
+
+    breakIntoLines(ctx: CanvasRenderingContext2D, maxWidth: number): Array<Text> {
+        const results = new Array<Text>();
+
+        this.#style.setupStyle(ctx, 1);
+        const entries = splitStringIntoLines(ctx, this.#value, maxWidth);
+        if (entries.length === 1) {
+            return [this];
+        }
+        for (let i = 0; i < entries.length; i++) {
+            const text = new Text(entries[i])
+            text.#style = this.#style;
+            results.push(text)
+        }
+
+        return results;
+    }
+
+    split(char: string): Array<Text> {
+        const entries = this.#value.split(char)
+        const results = new Array<Text>();
+        for (let i = 0; i < entries.length; i++) {
+            const text = new Text(entries[i])
+            text.#style = this.#style;
+            results.push(text)
+        }
+        return results;
+    }
+
+    splitAtIndex(index: number): Array<Text> {
+        const results = [
+            new Text(this.#value.substring(0, index)),
+            new Text(this.#value.substring(index, 0)),
+        ];
+
+
+        for (let i = 0; i < results.length; i++) {
+            results[i].#style = this.#style;
+        }
+        return results;
+    }
+
+    splitAtWidth(ctx: CanvasRenderingContext2D, maxWidth: number): Array<Text> {
+        this.#style.setupStyle(ctx, 1);
+        const entries = splitString(ctx, this.#value, maxWidth);
+        if (entries.length === 1) {
+            return [this];
+        }
+
+        const results = new Array<Text>();
+        for (let i = 0; i < entries.length; i++) {
+            const text = new Text(entries[i])
+            text.#style = this.#style;
+            results.push(text)
+        }
+        return results;
+    }
+
+    #measure(ctx: CanvasRenderingContext2D): void {
+        if (this.#measured) {
+            return;
+        }
+
+        this.#style.setupStyle(ctx, 1);
+        const measurements = ctx.measureText(this.#value);
+        this.#size.x = measurements.width;
+        this.#size.y = measurements.actualBoundingBoxAscent + measurements.actualBoundingBoxDescent;
+        this.#measured = true;
+    }
+
+    size(ctx: CanvasRenderingContext2D, scale: number, out: Vector2): void {
+        this.#measure(ctx);
+        CopyVector2(out, this.#size);
+        ScaleVector(out, scale);
+    }
+
+    setColor(color: string): void {
+        this.#style.setColor(color);
+    }
+    
+    getColor(): string {
+        return this.#style.getColor();
+    }
+
+    setSize(size: number): void {
+        this.#style.setSize(size);
+    }
+
+    setWeight(weight: FontWeight): void {
+        this.#style.setWeight(weight);
+    }
+
+    render(ctx: CanvasRenderingContext2D, scale: number, position: Vector2): void {
+        this.#style.setupStyle(ctx, scale)
+        ctx.fillText(this.#value, position.x, position.y);
+    }
+
+    style(): TextStyle {
+        return this.#style;
+    }
+}

package/src/types/vector2.ts

@@ -0,0 +1,34 @@
+export interface Vector2 {
+    x: number
+    y: number
+}
+
+export function CopyVector2(dst: Vector2, src: Vector2): void {
+    dst.x = src.x;
+    dst.y = src.y;
+}
+
+export function SubVector2(dst: Vector2, a: Vector2, b: Vector2): void {
+    dst.x = a.x - b.x;
+    dst.y = a.y - b.y;
+}
+
+export function AddVector2(dst: Vector2, a: Vector2, b: Vector2): void {
+    dst.x = a.x + b.x;
+    dst.y = a.y + b.y;
+}
+
+export function ScaleVector(dst: Vector2, scale: number): void {
+    dst.x *= scale;
+    dst.y *= scale;
+}
+
+export function Zero(): Vector2 {
+    return { x: 0, y: 0 };
+}
+
+export function Distance(a: Vector2, b: Vector2): number { 
+    const xd = b.x - a.x
+    const yd = b.y - a.y
+    return Math.sqrt((xd*xd)+(yd*yd))
+}

package/src/utils/color.ts

@@ -0,0 +1,136 @@
+import { Clamp01 } from './math';
+
+export interface Color {
+    r: number, // 0 - 1
+    g: number, // 0 - 1
+    b: number, // 0 - 1
+}
+
+export interface HSV {
+    h: number,  // angle in degrees
+    s: number,  // 0 - 1
+    v: number,  // 0 - 1
+}
+
+function componentToHex(c: number) {
+    var hex = c.toString(16);
+    return hex.length == 1 ? "0" + hex : hex;
+}
+
+export function RgbToHex(c: Color): string {
+    return "#" + componentToHex(Math.round(c.r * 255)) + componentToHex(Math.round(c.g * 255)) + componentToHex(Math.round(c.b * 255));
+}
+
+export function HexToColor(hex: string): Color | null {
+    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    return result ? {
+        r: parseInt(result[1], 16) / 255,
+        g: parseInt(result[2], 16) / 255,
+        b: parseInt(result[3], 16) / 255
+    } : null;
+}
+
+
+export function HSV2RGB(hsv: HSV, out: Color): void {
+    if (hsv.s <= 0.0) {       // < is bogus, just shuts up warnings
+        out.r = hsv.v;
+        out.g = hsv.v;
+        out.b = hsv.v;
+        return;
+    }
+    let hh = hsv.h;
+    if (hh >= 360.0) {
+        hh = 0.0;
+    }
+    hh /= 60.0;
+
+    const i = Math.round(hh);
+    const ff = hh - i;
+    const p = hsv.v * (1.0 - hsv.s);
+    const q = hsv.v * (1.0 - (hsv.s * ff));
+    const t = hsv.v * (1.0 - (hsv.s * (1.0 - ff)));
+
+    switch (i) {
+        case 0:
+            out.r = hsv.v;
+            out.g = t;
+            out.b = p;
+            break;
+        case 1:
+            out.r = q;
+            out.g = hsv.v;
+            out.b = p;
+            break;
+        case 2:
+            out.r = p;
+            out.g = hsv.v;
+            out.b = t;
+            break;
+
+        case 3:
+            out.r = p;
+            out.g = q;
+            out.b = hsv.v;
+            break;
+        case 4:
+            out.r = t;
+            out.g = p;
+            out.b = hsv.v;
+            break;
+        // case 5:
+        default:
+            out.r = hsv.v;
+            out.g = p;
+            out.b = q;
+            break;
+    }
+
+    out.r = Clamp01(out.r)
+    out.g = Clamp01(out.g)
+    out.b = Clamp01(out.b)
+}
+
+export function RGB2HSV(rgb: Color, out: HSV): void {
+    out.h = 0;
+    out.s = 0;
+    out.v = 0;
+    let min: number = 0;
+    let max: number = 0;
+    let delta: number = 0;
+
+    min = rgb.r < rgb.g ? rgb.r : rgb.g;
+    min = min < rgb.b ? min : rgb.b;
+
+    max = rgb.r > rgb.g ? rgb.r : rgb.g;
+    max = max > rgb.b ? max : rgb.b;
+
+    out.v = max;                                // v
+    delta = max - min;
+    if (delta < 0.00001) {
+        out.s = 0;
+        out.h = 0; // undefined, maybe nan?
+        return;
+    }
+    if (max > 0.0) { // NOTE: if Max is == 0, this divide would cause a crash
+        out.s = (delta / max);                  // s
+    } else {
+        // if max is 0, then r = g = b = 0              
+        // s = 0, h is undefined
+        out.s = 0.0;
+        out.h = NaN;                            // its now undefined
+        return;
+    }
+    if (rgb.r >= max)                           // > is bogus, just keeps compilor happy
+        out.h = (rgb.g - rgb.b) / delta;        // between yellow & magenta
+    else
+        if (rgb.g >= max)
+            out.h = 2.0 + (rgb.b - rgb.r) / delta;  // between cyan & yellow
+        else
+            out.h = 4.0 + (rgb.r - rgb.g) / delta;  // between magenta & cyan
+
+    out.h *= 60.0;                              // degrees
+
+    if (out.h < 0.0)
+        out.h += 360.0;
+
+}

package/src/utils/html.ts

@@ -0,0 +1,21 @@
+export function HtmlFromString(htmlString: string): Element {
+    var div = document.createElement('div');
+    div.innerHTML = htmlString;
+    const child = div.firstElementChild;
+    if (child === null || child === undefined) {
+        throw new Error("unable to create html from string")
+    }
+    return child;
+}
+
+interface CSS {
+    [name: string]: any
+}
+
+export function CssToString(css: CSS): string {
+    let cssString = ""
+    for (let entry in css) {
+        cssString += entry + ":" + css[entry] + ";";
+    }
+    return cssString;
+}

package/src/utils/math.ts

@@ -0,0 +1,8 @@
+export function Clamp(v: number, min: number, max: number): number {
+    return Math.min(Math.max(v, min), max)
+}
+
+export function Clamp01(v: number): number {
+    return Clamp(v, 0, 1);
+}
+