@elicdavis/node-flow 0.1.0

package/src/organize.ts

@@ -0,0 +1,181 @@
+import { Camera } from "./camera";
+import { NodeFlowGraph } from "./graph";
+import { FlowNode } from "./node";
+import { NodeSubsystem } from "./nodes/subsystem";
+import { Box } from "./types/box";
+
+// TODO: Cyclical dependencies will end our life
+
+function MarkInputs(graph: NodeSubsystem, positions: Array<number>, nodeLUT: Map<FlowNode, number>, node: number, depth: number, shouldSort: Map<FlowNode, boolean>) {
+    const inputs = graph.connectedInputsNodeReferencesByIndex(node);
+    for (let i = 0; i < inputs.length; i++) {
+        const nodeIndex = nodeLUT.get(inputs[i]) as number;
+
+        if (!shouldSort.has(inputs[i])) {
+            continue;
+        }
+
+        positions[nodeIndex] = depth;
+        MarkInputs(graph, positions, nodeLUT, nodeIndex, depth - 1, shouldSort);
+    }
+}
+
+function MarkOutputs(graph: NodeSubsystem, positions: Array<number>, nodeLUT: Map<FlowNode, number>, node: number, depth: number, shouldSort: Map<FlowNode, boolean>) {
+    const outputs = graph.connectedInputsNodeReferencesByIndex(node);
+    for (let i = 0; i < outputs.length; i++) {
+        const nodeIndex = nodeLUT.get(outputs[i]) as number;
+
+        if (!shouldSort.has(outputs[i])) {
+            continue;
+        }
+
+        positions[nodeIndex] = depth;
+        MarkOutputs(graph, positions, nodeLUT, nodeIndex, depth + 1, shouldSort);
+    }
+}
+
+export function Organize(ctx: CanvasRenderingContext2D, graph: NodeSubsystem, nodesToSort?: Array<number>): void {
+    const nodes = graph.getNodes();
+    const nodeLUT = new Map<FlowNode, number>();
+    const bounds = new Array<Box>(nodes.length);
+    const relativePosition = new Array<Array<number>>(nodes.length);
+    const claimed = new Array<boolean>(nodes.length);
+    const shouldSort = new Map<FlowNode, boolean>(); // TODO: we don't really need a Map, is their a Set data structure?
+
+    if (nodesToSort) {
+        if (nodesToSort.length < 2) {
+            return;
+        }
+        for (let i = 0; i < nodesToSort.length; i++) {
+            shouldSort.set(nodes[nodesToSort[i]], true);
+        }
+    } else {
+        for (let i = 0; i < nodes.length; i++) {
+            shouldSort.set(nodes[i], true);
+        }
+    }
+
+    const camera = new Camera();
+
+    // Initialize everything
+    for (let i = 0; i < nodes.length; i++) {
+        bounds[i] = nodes[i].calculateBounds(ctx, camera);
+        relativePosition[i] = new Array<number>(nodes.length);
+        nodeLUT.set(nodes[i], i);
+        claimed[i] = false;
+    }
+
+    for (let i = 0; i < nodes.length; i++) {
+        relativePosition[i][i] = 0;
+        MarkInputs(graph, relativePosition[i], nodeLUT, i, -1, shouldSort);
+        MarkOutputs(graph, relativePosition[i], nodeLUT, i, 1, shouldSort);
+    }
+
+    interface entry {
+        node: number;
+        length: number;
+        min: number;
+        max: number
+    }
+
+    let entries = new Array<entry>(shouldSort.size);
+
+    let nodeIndex = 0;
+    for (let i = 0; i < nodes.length; i++) {
+        if (!shouldSort.has(nodes[i])) {
+            continue;
+        }
+
+        let min = 0;
+        let max = 0;
+        for (let x = 0; x < nodes.length; x++) {
+            const val = relativePosition[i][x];
+            if (val === undefined) {
+                continue;
+            }
+
+            min = Math.min(min, val);
+            max = Math.max(max, val);
+        }
+        entries[nodeIndex] = {
+            length: max - min,
+            node: i,
+            min: min,
+            max: max
+        }
+        nodeIndex++
+    }
+
+
+    entries.sort((a, b) => b.length - a.length);
+
+    interface Column {
+        Nodes: Array<FlowNode>;
+        Width: number;
+    }
+
+    const columns = Array<Column>(entries[0].length + 1);
+    for (let i = 0; i < columns.length; i++) {
+        columns[i] = {
+            Nodes: new Array<FlowNode>(),
+            Width: 0
+        };
+    }
+
+    for (let i = 0; i < entries.length; i++) {
+        const entry = entries[i];
+        if (claimed[entry.node] === true) {
+            continue;
+        }
+
+        const positions = relativePosition[entry.node];
+
+        for (let p = 0; p < positions.length; p++) {
+            const position = positions[p];
+            if (position === undefined) {
+                continue;
+            }
+
+            if (claimed[p] === true) {
+                continue;
+            }
+
+            const nodeBounds = bounds[p];
+            const column = columns[position - entry.min];
+            column.Nodes.push(nodes[p])
+            column.Width = Math.max(column.Width, nodeBounds.Size.x)
+
+            claimed[p] = true;
+        }
+    }
+
+    let allColumnsWidths = 0;
+    for (let c = 0; c < columns.length; c++) {
+        allColumnsWidths += columns[c].Width;
+    }
+
+    const widthSpacing = 100;
+    const heightSpacing = 50;
+
+    let widthOffset = 0;
+    for (let c = 0; c < columns.length; c++) {
+        var column = columns[c];
+        let heightOffset = 0;
+
+        widthOffset -= widthSpacing + column.Width;
+
+        for (let n = 0; n < column.Nodes.length; n++) {
+            const node = column.Nodes[n];
+            const nodeBounds = bounds[nodeLUT.get(node) as number];
+
+            let pos = {
+                x: widthOffset + allColumnsWidths + (columns.length * widthSpacing),
+                y: heightOffset
+            }
+
+            heightOffset += nodeBounds.Size.y + heightSpacing
+            node.setPosition(pos);
+        }
+    }
+
+}

package/src/pass/subsystem.ts

@@ -0,0 +1,64 @@
+import { Camera } from "../camera";
+import { ContextMenuConfig } from "../contextMenu";
+import { RenderResults } from "../graphSubsystem";
+import { List } from "../types/list";
+import { Vector2 } from "../types/vector2";
+
+type RenderLambda = () => void
+
+
+/**
+ * Generic subsystem meant for other sybsystems to pass whatever to to render 
+ * at a certain time.
+ * 
+ * Initial inspriation is for a subsytem to submit something to render on top 
+ * of all other subsystems.
+ */
+export class PassSubsystem {
+
+    #queue: List<RenderLambda>
+
+    constructor() {
+        this.#queue = new List<RenderLambda>();
+    }
+
+    queue(lambda: RenderLambda): void {
+        if(!lambda) {
+            return;
+        }
+        this.#queue.Push(lambda);
+    }
+
+    render(ctx: CanvasRenderingContext2D, camera: Camera, mousePosition: Vector2 | undefined): RenderResults | undefined {
+        for (let i = 0; i < this.#queue.Count(); i++) {
+            this.#queue.At(i)();
+        }
+        this.#queue.Clear();
+        return;
+    }
+
+    openContextMenu(ctx: CanvasRenderingContext2D, position: Vector2): ContextMenuConfig | null {
+        // Left intentionally blank
+        return null;
+    }
+
+    clickStart(mousePosition: Vector2, camera: Camera, ctrlKey: boolean): boolean {
+        // Left intentionally blank
+        return false;
+    }
+
+    mouseDragEvent(delta: Vector2, scale: number): boolean {
+        // Left intentionally blank
+        return false;
+    }
+
+    fileDrop(file: File): boolean {
+        // Left intentionally blank
+        return false;
+    }
+
+    clickEnd(): void {
+        // Left intentionally blank
+    }
+
+}

package/src/performance.ts

@@ -0,0 +1,9 @@
+export function TimeExecution(name: string, callback: Function) {
+    const start = name + "_Start";
+    const end = name + "_End";
+
+    performance.mark(start);
+    callback();
+    performance.mark(end);
+    performance.measure(name, start, end);
+}

package/src/popup.ts

@@ -0,0 +1,81 @@
+export interface PopupConfig {
+    title: string;
+    options: Array<string>;
+
+    onClose?: (button: string | null) => void;
+    content?: () => Element;
+    buttonCSS?: string;
+}
+
+export class Popup {
+
+    #title: string;
+
+    #options: Array<string>;
+
+    #content?: () => Element;
+
+    #onClose?: (button: string | null) => void;
+
+    // Styling ================================================================
+
+    #buttonCSS: string;
+
+    // Runtime ================================================================
+
+    #popup: HTMLDivElement | null;
+
+    constructor(config: PopupConfig) {
+        this.#title = config.title;
+        this.#options = config.options;
+        this.#content = config.content;
+        this.#onClose = config.onClose;
+        this.#buttonCSS = config.buttonCSS === undefined ? "flex-grow: 1; margin-right: 8px;" : config.buttonCSS;
+        this.#popup = null;
+    }
+
+    Hide(): void {
+        if (this.#popup === null) {
+            return;
+        }
+        document.body.removeChild(this.#popup);
+        this.#popup = null;
+    }
+
+    Show(): void {
+        this.#popup = document.createElement('div');
+        this.#popup.style.cssText = 'position:absolute;top:0;width:100%;display:flex;height:100%;justify-content:center;align-items:center;background-color:#00000070;';
+        document.body.appendChild(this.#popup);
+
+        const container = document.createElement('div');
+        container.style.cssText = 'background-color:#000;color:white;font-family:Verdana;border-radius:8px;padding:16px;';
+        this.#popup.appendChild(container);
+
+        const title = document.createElement("h2");
+        title.textContent = this.#title;
+        title.style.cssText = "margin-top:0;margin-bottom:16px;";
+        container.appendChild(title)
+
+        if (this.#content !== undefined) {
+            container.appendChild(this.#content());
+        }
+
+        const buttonContainer = document.createElement("div");
+        buttonContainer.style.cssText = 'margin-top:16px;justify-content:space-around;align-items:center;flex-direction:row;display:flex;';
+        container.appendChild(buttonContainer);
+
+        for (let i = 0; i < this.#options.length; i++) {
+            const button = document.createElement("button");
+            button.style.cssText = this.#buttonCSS;
+            button.textContent = this.#options[i];
+            button.onclick = () => {
+                this.Hide();
+                if (this.#onClose !== undefined) {
+                    this.#onClose(this.#options[i]);
+                }
+            };
+            buttonContainer.appendChild(button);
+        }
+    }
+
+} 

package/src/popups/form.ts

@@ -0,0 +1,63 @@
+import { Popup } from "../popup";
+
+interface FormValue {
+    name: string;
+
+    // https://html.spec.whatwg.org/multipage/input.html#dom-input-type
+    type: string;
+
+    startingValue: any;
+}
+
+interface Config {
+    title: string;
+    form: Array<FormValue>;
+    onUpdate: (newValue: Array<any>) => void;
+    onCancel?: () => void;
+}
+
+export function FormPopup(config: Config): Popup {
+    let input = new Array<HTMLInputElement | null>();
+
+    const setOption = "Set";
+    const cancelOption = "Cancel";
+
+    return new Popup({
+        title: config.title,
+        options: [setOption, cancelOption],
+        content: () => {
+            const container = document.createElement('div');
+            container.style.flexDirection = "column";
+            container.style.display = "flex";
+
+            for (let i = 0; i < config.form.length; i++) {
+                const title = document.createElement("h4");
+                title.innerText = config.form[i].name;
+                container.append(title);
+
+                const ele = document.createElement('input');
+                ele.value = config.form[i].startingValue;
+                ele.type = config.form[i].type;
+                container.append(ele);
+                input.push(ele);
+                container.append(document.createElement("br"));
+            }
+
+            return container;
+        },
+        onClose: (button: string | null): void => {
+            if (button !== setOption || input === null) {
+                if (config.onCancel) {
+                    config.onCancel();
+                }
+                return;
+            }
+
+            const values = new Array<any>();
+            for (let i = 0; i < config.form.length; i++) {
+                values[i] = input[i]?.value;
+            }
+            config.onUpdate(values);
+        },
+    });
+}

package/src/popups/string.ts

@@ -0,0 +1,33 @@
+import { Popup } from "../popup";
+
+interface Config {
+    title: string;
+    startingValue: string;
+    onUpdate: (newValue: string) => void;
+    onCancel?: () => void;
+}
+
+export function SetStringPopup(config: Config): Popup {
+    let input: HTMLInputElement | null = null;
+
+    return new Popup({
+        title: config.title,
+        options: ["Set", "Cancel"],
+        content: () => {
+            const container = document.createElement('div');
+            input = document.createElement('input')
+            input.value = config.startingValue;
+            container.append(input);
+            return container;
+        },
+        onClose: (button: string | null): void => {
+            if (button !== "Set" || input === null) {
+                if(config.onCancel) {
+                    config.onCancel();
+                }
+                return;
+            }
+            config.onUpdate(input.value);
+        },
+    });
+}

package/src/port.ts

@@ -0,0 +1,223 @@
+import { Camera } from "./camera";
+import { Connection } from './connection';
+import { FlowNode } from "./node";
+import { PassSubsystem } from "./pass/subsystem";
+import { TextAlign } from "./styles/canvasTextAlign";
+import { Box, BoxIntersection, InBox } from "./types/box";
+import { Vector2 } from "./types/vector2";
+import { Color, HSV, HSV2RGB, RgbToHex } from "./utils/color";
+
+export enum PortType {
+    Input = "INPUT",
+    Output = "OUTPUT",
+    InputArray = "INPUTARRAY",
+}
+
+export interface PortStyle {
+    size?: number;
+    fillColor?: string;
+    borderColor?: string;
+    borderSize?: number;
+}
+
+type ConnectionChangeCallback = (connection: Connection, connectionIndex: number, port: Port, portType: PortType, node: FlowNode) => void
+
+export interface PortConfig {
+    name?: string;
+    type?: string;
+    array?: boolean;
+    emptyStyle?: PortStyle;
+    filledStyle?: PortStyle;
+    onConnectionAdded?: ConnectionChangeCallback;
+    onConnectionRemoved?: ConnectionChangeCallback;
+};
+
+// Calculate a color hash for an arbirary type
+function fallbackColor(type: string, s: number): string {
+    let value = 0;
+    for (var i = 0; i < type.length; i++) {
+        value += type.charCodeAt(i) * (i + 1);
+    }
+
+    const mod = 24;
+    value = Math.round(value) % mod;
+
+    const hsv: HSV = { h: (value / (mod - 1)) * 360, s: s, v: 1 };
+    const color: Color = { r: 0, g: 0, b: 0 };
+    HSV2RGB(hsv, color);
+    return RgbToHex(color);
+}
+
+export class Port {
+
+    #node: FlowNode;
+
+    #displayName: string;
+
+    #emptyStyle: PortStyle;
+
+    #filledStyle: PortStyle;
+
+    #connections: Array<Connection>;
+
+    #portType: PortType
+
+    #dataType: string;
+
+    #onConnectionAdded: Array<ConnectionChangeCallback>;
+
+    #onConnectionRemoved: Array<ConnectionChangeCallback>;;
+
+    constructor(node: FlowNode, portType: PortType, config?: PortConfig) {
+        this.#node = node;
+        this.#connections = new Array<Connection>();
+        this.#portType = portType;
+        this.#displayName = config?.name === undefined ? "Port" : config?.name;
+        this.#dataType = config?.type === undefined ? "" : config?.type;
+
+        this.#emptyStyle = {
+            borderColor: config?.emptyStyle?.borderColor === undefined ? "#1c1c1c" : config.emptyStyle?.borderColor,
+            fillColor: config?.emptyStyle?.fillColor === undefined ? fallbackColor(this.#dataType, 0.3) : config.emptyStyle?.fillColor,
+            borderSize: config?.emptyStyle?.borderSize === undefined ? 1 : config.emptyStyle?.borderSize,
+            size: config?.emptyStyle?.size === undefined ? 4 : config.emptyStyle?.size
+        }
+
+        this.#filledStyle = {
+            borderColor: config?.filledStyle?.borderColor === undefined ? "#1c1c1c" : config.filledStyle?.borderColor,
+            fillColor: config?.filledStyle?.fillColor === undefined ? fallbackColor(this.#dataType, 1) : config.filledStyle?.fillColor,
+            borderSize: config?.filledStyle?.borderSize === undefined ? 1 : config.filledStyle?.borderSize,
+            size: config?.filledStyle?.size === undefined ? 5 : config.filledStyle?.size
+        }
+
+        this.#onConnectionAdded = new Array<ConnectionChangeCallback>();
+        if (config?.onConnectionAdded) {
+            this.#onConnectionAdded.push(config?.onConnectionAdded);
+        }
+
+        this.#onConnectionRemoved = new Array<ConnectionChangeCallback>();
+        if (config?.onConnectionRemoved) {
+            this.#onConnectionRemoved.push(config?.onConnectionRemoved);
+        }
+    }
+
+    addConnection(connection: Connection): void {
+        const c = this.#connections.length;
+        this.#connections.push(connection);
+        for (let i = 0; i < this.#onConnectionAdded.length; i++) {
+            this.#onConnectionAdded[i](connection, c, this, this.#portType, this.#node);
+        }
+    }
+
+    replaceConnection(connection: Connection, index: number): void {
+        const c = this.#connections.length;
+        this.#connections[index] = connection;
+        for (let i = 0; i < this.#onConnectionAdded.length; i++) {
+            this.#onConnectionAdded[i](connection, c, this, this.#portType, this.#node);
+        }
+    }
+
+    addConnectionAddedListener(callback: ConnectionChangeCallback) {
+        if (callback === undefined) {
+            return;
+        }
+        this.#onConnectionAdded.push(callback);
+    }
+
+    connections(): Array<Connection> {
+        return this.#connections;
+    }
+
+    addConnectionRemovedListener(callback: ConnectionChangeCallback) {
+        if (callback === undefined) {
+            return;
+        }
+        this.#onConnectionRemoved.push(callback);
+    }
+
+    clearConnection(connection: Connection): void {
+        const index = this.#connections.indexOf(connection);
+        if (index > -1) {
+            this.#connections.splice(index, 1);
+            for (let i = 0; i < this.#onConnectionRemoved.length; i++) {
+                this.#onConnectionRemoved[i](connection, index, this, this.#portType, this.#node);
+            }
+        } else {
+            console.error("no connection found to remove");
+        }
+    }
+
+    getDataType(): string {
+        return this.#dataType;
+    }
+
+    getPortType(): PortType {
+        return this.#portType;
+    }
+
+    getDisplayName(): string {
+        return this.#displayName;
+    }
+
+    filledStyleColor(): string {
+        if (this.#filledStyle.fillColor === undefined) {
+            console.error("There's no fill color!!!!!!!!!")
+            return "black";
+        }
+        return this.#filledStyle.fillColor;
+    }
+
+    #box: Box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
+
+    render(ctx: CanvasRenderingContext2D, position: Vector2, camera: Camera, mousePosition: Vector2 | undefined, postProcess: PassSubsystem): Box {
+        let style = this.#emptyStyle;
+        if (this.#connections.length > 0) {
+            style = this.#filledStyle;
+        }
+
+        let scaledRadius = style.size as number * camera.zoom
+
+        if (mousePosition && InBox(this.#box, mousePosition)) {
+            scaledRadius *= 1.25;
+
+            // Redeclare so lambda is ensured to use these values
+            const xPos = position.x;
+            const yPos = position.y;
+
+            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));
+            })
+        }
+
+        this.#box.Position.x = position.x - scaledRadius;
+        this.#box.Position.y = position.y - scaledRadius;
+        this.#box.Size.x = scaledRadius * 2;
+        this.#box.Size.y = scaledRadius * 2;
+
+        ctx.strokeStyle = style.borderColor as string;
+        ctx.fillStyle = style.fillColor as string;
+
+        ctx.beginPath();
+        if (this.#portType === PortType.InputArray) {
+            ctx.rect(position.x - scaledRadius, position.y - scaledRadius, scaledRadius * 2, scaledRadius * 2)
+        } else {
+            ctx.arc(position.x, position.y, scaledRadius, 0, 2 * Math.PI);
+        }
+        ctx.fill();
+        ctx.stroke();
+
+
+        return this.#box;
+    }
+}