@elicdavis/node-flow 0.1.14 → 0.1.16

package/src/organize.ts

@@ -1,181 +1,276 @@
-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);
-        }
-    }
-
-}
+import { Camera } from "./camera";
+import { FlowNode } from "./node";
+import { NodeSubsystem } from "./nodes/subsystem";
+import { Box } from "./types/box";
+import { Vector2 } from "./types/vector2";
+
+const widthSpacing = 100;
+const heightSpacing = 50;
+
+/**
+ * How many times to sweep the graph re-ordering each layer by where its
+ * neighbours sit. Crossings drop quickly and then stop improving, so there
+ * is no reason to keep going.
+ */
+const orderingSweeps = 8;
+
+export interface Layout {
+    /** Indices into the node array, one list per layer, left to right. */
+    layers: Array<Array<number>>;
+    /** Which layer each node landed in, by node index. */
+    layerOf: Map<number, number>;
+}
+
+/**
+ * Orders the nodes so every edge points from an earlier node to a later one,
+ * as far as that is possible. Edges that would point backwards - the ones
+ * closing a cycle - are the ones left out, which is what keeps a cyclic
+ * graph from hanging or stacking into one column.
+ */
+export function topologicalOrder(sorting: Array<number>, upstream: Map<number, Array<number>>): Array<number> {
+    const visited = new Set<number>();
+    const order = new Array<number>();
+
+    // Iterative: a deep graph would blow the stack recursing.
+    for (const root of sorting) {
+        if (visited.has(root)) {
+            continue;
+        }
+
+        const stack: Array<{ node: number, expanded: boolean }> = [{ node: root, expanded: false }];
+        while (stack.length > 0) {
+            const top = stack[stack.length - 1];
+
+            if (top.expanded) {
+                stack.pop();
+                order.push(top.node);
+                continue;
+            }
+
+            top.expanded = true;
+            if (visited.has(top.node)) {
+                stack.pop();
+                continue;
+            }
+            visited.add(top.node);
+
+            const feeders = upstream.get(top.node);
+            if (feeders === undefined) {
+                continue;
+            }
+            for (const feeder of feeders) {
+                if (!visited.has(feeder)) {
+                    stack.push({ node: feeder, expanded: false });
+                }
+            }
+        }
+    }
+
+    return order;
+}
+
+/**
+ * Puts every node one layer to the right of the furthest node feeding it, so
+ * a node never sits left of something it consumes. Taking the furthest and
+ * not the first is what keeps a long chain and a short chain that rejoin
+ * from landing on top of each other.
+ */
+export function assignLayers(sorting: Array<number>, upstream: Map<number, Array<number>>): Layout {
+    const order = topologicalOrder(sorting, upstream);
+    const placed = new Set<number>();
+    const layerOf = new Map<number, number>();
+
+    for (const node of order) {
+        let layer = 0;
+        for (const feeder of upstream.get(node) ?? []) {
+            // Only feeders already placed: anything else is a back edge, and
+            // following it would mean waiting on a node that waits on this one.
+            if (placed.has(feeder)) {
+                layer = Math.max(layer, (layerOf.get(feeder) as number) + 1);
+            }
+        }
+        layerOf.set(node, layer);
+        placed.add(node);
+    }
+
+    let deepest = 0;
+    for (const layer of layerOf.values()) {
+        deepest = Math.max(deepest, layer);
+    }
+
+    const layers = new Array<Array<number>>(deepest + 1);
+    for (let i = 0; i < layers.length; i++) {
+        layers[i] = new Array<number>();
+    }
+    for (const node of order) {
+        layers[layerOf.get(node) as number].push(node);
+    }
+
+    return { layers, layerOf };
+}
+
+/**
+ * Reorders each layer so nodes sit across from the ones they connect to,
+ * by repeatedly moving every node to the average position of its neighbours
+ * in the layer before it, then the layer after it. This is what stops the
+ * edges crossing over each other.
+ */
+export function orderWithinLayers(
+    layout: Layout,
+    upstream: Map<number, Array<number>>,
+    downstream: Map<number, Array<number>>,
+): void {
+    const slotOf = new Map<number, number>();
+    const recordSlots = (): void => {
+        for (const layer of layout.layers) {
+            for (let i = 0; i < layer.length; i++) {
+                slotOf.set(layer[i], i);
+            }
+        }
+    };
+    recordSlots();
+
+    const meanSlot = (node: number, neighbours: Map<number, Array<number>>, layer: number): number => {
+        let total = 0;
+        let count = 0;
+        for (const neighbour of neighbours.get(node) ?? []) {
+            // Only neighbours in the adjacent layer say anything about where
+            // this node should sit; one several layers away does not.
+            if (layout.layerOf.get(neighbour) !== layer) {
+                continue;
+            }
+            total += slotOf.get(neighbour) as number;
+            count++;
+        }
+        return count === 0 ? -1 : total / count;
+    };
+
+    const sweep = (neighbours: Map<number, Array<number>>, towards: number): void => {
+        for (let i = 0; i < layout.layers.length; i++) {
+            const index = towards > 0 ? i : layout.layers.length - 1 - i;
+            const adjacent = index + towards;
+            if (adjacent < 0 || adjacent >= layout.layers.length) {
+                continue;
+            }
+
+            const layer = layout.layers[index];
+            const keys = new Map<number, number>();
+            for (const node of layer) {
+                const mean = meanSlot(node, neighbours, adjacent);
+                // A node with nothing in the adjacent layer keeps its place
+                // rather than being dragged to the top.
+                keys.set(node, mean === -1 ? (slotOf.get(node) as number) : mean);
+            }
+
+            layer.sort((a, b) => (keys.get(a) as number) - (keys.get(b) as number));
+            for (let s = 0; s < layer.length; s++) {
+                slotOf.set(layer[s], s);
+            }
+        }
+    };
+
+    for (let i = 0; i < orderingSweeps; i++) {
+        sweep(upstream, -1);
+        sweep(downstream, 1);
+    }
+}
+
+export function Organize(ctx: CanvasRenderingContext2D, graph: NodeSubsystem, nodesToSort?: Array<number>): void {
+    const nodes = graph.getNodes();
+    if (nodes.length === 0) {
+        return;
+    }
+
+    const sorting = new Array<number>();
+    if (nodesToSort) {
+        if (nodesToSort.length < 2) {
+            return;
+        }
+        for (const index of nodesToSort) {
+            if (index >= 0 && index < nodes.length) {
+                sorting.push(index);
+            }
+        }
+    } else {
+        for (let i = 0; i < nodes.length; i++) {
+            sorting.push(i);
+        }
+    }
+    if (sorting.length < 2) {
+        return;
+    }
+
+    const inLayout = new Set<number>(sorting);
+    const nodeLUT = new Map<FlowNode, number>();
+    for (let i = 0; i < nodes.length; i++) {
+        nodeLUT.set(nodes[i], i);
+    }
+
+    const camera = new Camera();
+    const bounds = new Map<number, Box>();
+    for (const index of sorting) {
+        bounds.set(index, nodes[index].calculateBounds(ctx, camera));
+    }
+
+    // Edges, restricted to what is being laid out. Organizing a selection
+    // must not be steered by nodes that are staying where they are.
+    const upstream = new Map<number, Array<number>>();
+    const downstream = new Map<number, Array<number>>();
+    for (const index of sorting) {
+        const feeders = new Array<number>();
+        for (const feeder of graph.connectedInputsNodeReferencesByIndex(index)) {
+            const feederIndex = nodeLUT.get(feeder);
+            if (feederIndex !== undefined && inLayout.has(feederIndex) && feederIndex !== index) {
+                feeders.push(feederIndex);
+            }
+        }
+        upstream.set(index, feeders);
+
+        const consumers = new Array<number>();
+        for (const consumer of graph.connectedOutputsNodeReferences(index)) {
+            const consumerIndex = nodeLUT.get(consumer);
+            if (consumerIndex !== undefined && inLayout.has(consumerIndex) && consumerIndex !== index) {
+                consumers.push(consumerIndex);
+            }
+        }
+        downstream.set(index, consumers);
+    }
+
+    const layout = assignLayers(sorting, upstream);
+    orderWithinLayers(layout, upstream, downstream);
+
+    // Keep the result where the nodes already were, so organizing a
+    // selection doesn't fling it off to wherever the origin happens to be.
+    let anchor: Vector2 = { x: 0, y: 0 };
+    for (const index of sorting) {
+        const position = nodes[index].getPosition();
+        anchor.x += position.x;
+        anchor.y += position.y;
+    }
+    anchor.x /= sorting.length;
+    anchor.y /= sorting.length;
+
+    const layerWidths = layout.layers.map(layer =>
+        layer.reduce((widest, node) => Math.max(widest, (bounds.get(node) as Box).Size.x), 0));
+    const layerHeights = layout.layers.map(layer =>
+        layer.reduce((total, node) => total + (bounds.get(node) as Box).Size.y + heightSpacing, -heightSpacing));
+
+    const totalWidth = layerWidths.reduce((total, width) => total + width + widthSpacing, -widthSpacing);
+    const tallest = layerHeights.reduce((tallest, height) => Math.max(tallest, height), 0);
+
+    // Inputs on the left, consumers to their right, every layer centered
+    // against the tallest one so the graph reads as a band rather than
+    // hanging off a single corner.
+    let x = anchor.x - (totalWidth / 2);
+    for (let i = 0; i < layout.layers.length; i++) {
+        let y = anchor.y - (tallest / 2) + ((tallest - layerHeights[i]) / 2);
+
+        for (const node of layout.layers[i]) {
+            const size = (bounds.get(node) as Box).Size;
+            nodes[node].setPosition({ x: x + ((layerWidths[i] - size.x) / 2), y: y });
+            y += size.y + heightSpacing;
+        }
+
+        x += layerWidths[i] + widthSpacing;
+    }
+}

package/src/port.ts

@@ -31,12 +31,51 @@ export interface PortConfig {
     type?: string;
     description?: string;
     array?: boolean;
+
+    /**
+     * Lets this port connect to a port of any type, instead of only to one
+     * declaring the same `type` string. For a port whose type is decided by
+     * whatever gets wired into it, where `type` is a placeholder shown to
+     * the user rather than a promise about the values passing through.
+     */
+    anyType?: boolean;
+
+    /**
+     * Every type this port takes, when it takes more than one. For a port
+     * that works on a single value or an array of them, where `type` is
+     * only the one it happens to be showing.
+     *
+     * An empty or absent list means the port takes exactly its `type`,
+     * unless `anyType` says otherwise.
+     */
+    acceptedTypes?: Array<string>;
+
     emptyStyle?: PortStyle;
     filledStyle?: PortStyle;
     onConnectionAdded?: ConnectionChangeCallback;
     onConnectionRemoved?: ConnectionChangeCallback;
 };
 
+/**
+ * Whether two ports may be connected, going by their types alone. Each port
+ * offers the set of types it takes - one entry for an ordinary port, several
+ * for a port that takes more than one, and none at all for a port that takes
+ * anything. They connect when those sets overlap.
+ */
+export function portsCompatible(a: Port | undefined | null, b: Port | undefined | null): boolean {
+    if (!a || !b) {
+        return false;
+    }
+
+    const left = a.acceptedTypes();
+    const right = b.acceptedTypes();
+    if (left.length === 0 || right.length === 0) {
+        return true;
+    }
+
+    return left.some((type) => right.includes(type));
+}
+
 // Calculate a color hash for an arbirary type
 function fallbackColor(type: string, s: number): string {
     let value = 0;
@@ -69,6 +108,18 @@ export class Port {
 
     #dataType: string;
 
+    #anyType: boolean;
+
+    #acceptedTypes: Array<string>;
+
+    #description: string;
+
+    #array: boolean;
+
+    #configuredEmptyFill: string | undefined;
+
+    #configuredFilledFill: string | undefined;
+
     #dataTypePopupElement: RenderElementBase;
 
     #onConnectionAdded: Array<ConnectionChangeCallback>;
@@ -81,17 +132,23 @@ export class Port {
         this.#portType = portType;
         this.#displayName = config?.name === undefined ? "Port" : config?.name;
         this.#dataType = config?.type === undefined ? "" : config?.type;
+        this.#anyType = config?.anyType === true;
+        this.#acceptedTypes = config?.acceptedTypes === undefined ? [] : config.acceptedTypes;
+        this.#description = config?.description === undefined ? "" : config.description;
+        this.#array = config?.array === true;
+        this.#configuredEmptyFill = config?.emptyStyle?.fillColor;
+        this.#configuredFilledFill = config?.filledStyle?.fillColor;
 
         this.#emptyStyle = {
             borderColor: config?.emptyStyle?.borderColor === undefined ? "#1c1c1c" : config.emptyStyle?.borderColor,
-            fillColor: config?.emptyStyle?.fillColor === undefined ? fallbackColor(this.#dataType, 0.3) : config.emptyStyle?.fillColor,
+            fillColor: this.#configuredEmptyFill === undefined ? fallbackColor(this.#dataType, 0.3) : this.#configuredEmptyFill,
             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,
+            fillColor: this.#configuredFilledFill === undefined ? fallbackColor(this.#dataType, 1) : this.#configuredFilledFill,
             borderSize: config?.filledStyle?.borderSize === undefined ? 1 : config.filledStyle?.borderSize,
             size: config?.filledStyle?.size === undefined ? 5 : config.filledStyle?.size
         }
@@ -106,9 +163,20 @@ export class Port {
             this.#onConnectionRemoved.push(config?.onConnectionRemoved);
         }
 
+        this.#dataTypePopupElement = this.#buildTooltip();
+    }
+
+    #buildTooltip(): RenderElementBase {
         const containerElements = new Array<RenderElementBase>();
+
         let dataTypeDisplay = this.#dataType;
-        if (config?.array === true) {
+        if (this.#acceptedTypes.length > 1) {
+            dataTypeDisplay = this.#acceptedTypes.join(" or ");
+        }
+        if (dataTypeDisplay === "" && this.#anyType) {
+            dataTypeDisplay = "any";
+        }
+        if (this.#array) {
             dataTypeDisplay = "Array<" + dataTypeDisplay + ">"
         }
         containerElements.push(new TextElement(
@@ -120,10 +188,9 @@ export class Port {
             }
         ));
 
-        const description = config?.description;
-        if (description && description !== "") {
+        if (this.#description !== "") {
             containerElements.push(new TextElement(
-                new Text(description, { color: "white", style: FontStyle.Italic }),
+                new Text(this.#description, { color: "white", style: FontStyle.Italic }),
                 {
                     Align: TextAlign.Center,
                     Padding: { Top: 16 },
@@ -133,7 +200,7 @@ export class Port {
             ));
         }
 
-        this.#dataTypePopupElement = new ContainerRenderElement(
+        return new ContainerRenderElement(
             containerElements,
             {
                 BackgroundColor: "rgba(0, 0, 0, 0.85)",
@@ -145,6 +212,41 @@ export class Port {
         );
     }
 
+    #refreshDataType(): void {
+        if (this.#configuredEmptyFill === undefined) {
+            this.#emptyStyle.fillColor = fallbackColor(this.#dataType, 0.3);
+        }
+        if (this.#configuredFilledFill === undefined) {
+            this.#filledStyle.fillColor = fallbackColor(this.#dataType, 1);
+        }
+        this.#dataTypePopupElement = this.#buildTooltip();
+    }
+
+    setDataType(type: string): void {
+        if (this.#dataType === type) {
+            return;
+        }
+        this.#dataType = type;
+        this.#refreshDataType();
+    }
+
+    setAnyType(anyType: boolean): void {
+        if (this.#anyType === anyType) {
+            return;
+        }
+        this.#anyType = anyType;
+        this.#refreshDataType();
+    }
+
+    /**
+     * Scope accepted types to singular type
+     */
+    settleOn(type: string): void {
+        this.#acceptedTypes = [type];
+        this.setDataType(type);
+        this.#refreshDataType();
+    }
+
     addConnection(connection: Connection): void {
         const c = this.#connections.length;
         this.#connections.push(connection);
@@ -195,6 +297,27 @@ export class Port {
         return this.#dataType;
     }
 
+    acceptsAnyType(): boolean {
+        return this.#anyType;
+    }
+
+    /**
+     * Every type this port takes. Empty means it takes anything.
+     */
+    acceptedTypes(): Array<string> {
+        if (this.#anyType) {
+            return [];
+        }
+        if (this.#acceptedTypes.length > 0) {
+            return this.#acceptedTypes;
+        }
+        return [this.#dataType];
+    }
+
+    setAcceptedTypes(types: Array<string>): void {
+        this.#acceptedTypes = types;
+    }
+
     getPortType(): PortType {
         return this.#portType;
     }