@elicdavis/node-flow 0.1.20 → 0.2.0

package/src/popup.ts

@@ -1,3 +1,5 @@
+import { Theme } from "./theme";
+
 export interface PopupConfig {
     title: string;
     options: Array<string>;
@@ -58,11 +60,11 @@ export class Popup {
 
     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;';
+        this.#popup.style.cssText = `position:absolute;top:0;width:100%;display:flex;height:100%;justify-content:center;align-items:center;background-color:${Theme.Popup.Backdrop};`;
         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;';
+        container.style.cssText = `background-color:${Theme.Popup.BackgroundColor};color:${Theme.Popup.FontColor};font-family:${Theme.Popup.FontFamily};border-radius:${Theme.Popup.BorderRadius}px;padding:16px;`;
         this.#popup.appendChild(container);
 
         const title = document.createElement("h2");

package/src/port.ts

@@ -51,6 +51,11 @@ export interface PortConfig {
      */
     acceptedTypes?: Array<string>;
 
+    /**
+     * Leaves the port off the node until something is connected to it.
+     */
+    hidden?: boolean;
+
     emptyStyle?: PortStyle;
     filledStyle?: PortStyle;
     onConnectionAdded?: ConnectionChangeCallback;
@@ -88,6 +93,28 @@ export function portConfigTypes(config: PortConfig): Array<string> {
     return [config.type === undefined ? "" : config.type];
 }
 
+export const ARRAY_SLOT_PITCH = 12;
+
+/**
+ * Which gap between a port's wires a point is nearest: 0 is above the first,
+ * `count` is below the last.
+ */
+export function arrayInsertIndex(box: Box, count: number, y: number): number {
+    if (count === 0) {
+        return 0;
+    }
+    const index = Math.round((y - box.Position.y) / (box.Size.y / count));
+    return Math.min(count, Math.max(0, index));
+}
+
+export function arraySlotCenter(box: Box, count: number, index: number): Vector2 {
+    const slots = Math.max(1, count);
+    return {
+        x: box.Position.x + (box.Size.x / 2),
+        y: box.Position.y + ((index + 0.5) * box.Size.y / slots),
+    };
+}
+
 // Calculate a color hash for an arbirary type
 function fallbackColor(type: string, s: number): string {
     let value = 0;
@@ -128,6 +155,8 @@ export class Port {
 
     #array: boolean;
 
+    #hidden: boolean;
+
     #configuredEmptyFill: string | undefined;
 
     #configuredFilledFill: string | undefined;
@@ -148,6 +177,7 @@ export class Port {
         this.#acceptedTypes = config?.acceptedTypes === undefined ? [] : config.acceptedTypes;
         this.#description = config?.description === undefined ? "" : config.description;
         this.#array = config?.array === true;
+        this.#hidden = config?.hidden === true;
         this.#configuredEmptyFill = config?.emptyStyle?.fillColor;
         this.#configuredFilledFill = config?.filledStyle?.fillColor;
 
@@ -260,9 +290,13 @@ export class Port {
         this.#refreshDataType();
     }
 
-    addConnection(connection: Connection): void {
-        const c = this.#connections.length;
-        this.#connections.push(connection);
+    addConnection(connection: Connection, index?: number): void {
+        const c = index === undefined
+            ? this.#connections.length
+            : Math.min(Math.max(index, 0), this.#connections.length);
+        const was = this.hidden();
+        this.#connections.splice(c, 0, connection);
+        this.#visibilityMayHaveChanged(was);
         for (let i = 0; i < this.#onConnectionAdded.length; i++) {
             this.#onConnectionAdded[i](connection, c, this, this.#portType, this.#node);
         }
@@ -287,6 +321,36 @@ export class Port {
         return this.#connections;
     }
 
+    /**
+     * How many wires the port has room for: one per connection on an array
+     * input, so each can be told apart and picked up on its own.
+     */
+    slots(): number {
+        if (this.#portType !== PortType.InputArray) {
+            return 1;
+        }
+        return Math.max(1, this.#connections.length);
+    }
+
+    setHidden(hidden: boolean): void {
+        const was = this.hidden();
+        this.#hidden = hidden;
+        this.#visibilityMayHaveChanged(was);
+    }
+
+    #visibilityMayHaveChanged(was: boolean): void {
+        if (was !== this.hidden() || this.#portType === PortType.InputArray) {
+            this.#node?.invalidateLayout();
+        }
+    }
+
+    /**
+     * A port asked to hide still shows while anything is connected to it.
+     */
+    hidden(): boolean {
+        return this.#hidden && this.#connections.length === 0;
+    }
+
     addConnectionRemovedListener(callback: ConnectionChangeCallback) {
         if (callback === undefined) {
             return;
@@ -297,7 +361,9 @@ export class Port {
     clearConnection(connection: Connection): void {
         const index = this.#connections.indexOf(connection);
         if (index > -1) {
+            const was = this.hidden();
             this.#connections.splice(index, 1);
+            this.#visibilityMayHaveChanged(was);
             for (let i = 0; i < this.#onConnectionRemoved.length; i++) {
                 this.#onConnectionRemoved[i](connection, index, this, this.#portType, this.#node);
             }
@@ -373,23 +439,34 @@ export class Port {
             })
         }
 
+        const slots = this.slots();
+        const height = slots === 1 ? scaledRadius * 2 : slots * ARRAY_SLOT_PITCH * camera.zoom;
         this.#box.Position.x = position.x - scaledRadius;
-        this.#box.Position.y = position.y - scaledRadius;
+        this.#box.Position.y = position.y - (height / 2);
         this.#box.Size.x = scaledRadius * 2;
-        this.#box.Size.y = scaledRadius * 2;
+        this.#box.Size.y = height;
 
         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)
+            ctx.roundRect(this.#box.Position.x, this.#box.Position.y, this.#box.Size.x, this.#box.Size.y, slots === 1 ? 0 : scaledRadius);
         } else {
             ctx.arc(position.x, position.y, scaledRadius, 0, 2 * Math.PI);
         }
         ctx.fill();
         ctx.stroke();
 
+        if (slots > 1) {
+            ctx.fillStyle = style.borderColor as string;
+            for (let i = 0; i < slots; i++) {
+                const slot = arraySlotCenter(this.#box, slots, i);
+                ctx.beginPath();
+                ctx.arc(slot.x, slot.y, scaledRadius * 0.4, 0, 2 * Math.PI);
+                ctx.fill();
+            }
+        }
 
         return this.#box;
     }

package/src/styles/bevel.ts

@@ -0,0 +1,31 @@
+import { BevelColors } from "../theme";
+import { Box } from "../types/box";
+
+export function drawBevel(ctx: CanvasRenderingContext2D, box: Box, scale: number, colors: BevelColors, sunken: boolean): void {
+    const width = Math.max(1, 2 * scale);
+    const half = width / 2;
+    const left = box.Position.x + half;
+    const top = box.Position.y + half;
+    const right = box.Position.x + box.Size.x - half;
+    const bottom = box.Position.y + box.Size.y - half;
+
+    ctx.save();
+    ctx.lineWidth = width;
+    ctx.lineCap = "square";
+
+    ctx.strokeStyle = sunken ? colors.Dark : colors.Light;
+    ctx.beginPath();
+    ctx.moveTo(left, bottom);
+    ctx.lineTo(left, top);
+    ctx.lineTo(right, top);
+    ctx.stroke();
+
+    ctx.strokeStyle = sunken ? colors.Light : colors.Dark;
+    ctx.beginPath();
+    ctx.moveTo(right, top);
+    ctx.lineTo(right, bottom);
+    ctx.lineTo(left, bottom);
+    ctx.stroke();
+
+    ctx.restore();
+}

package/src/styles/cursor.ts

@@ -15,4 +15,5 @@ export enum CursorStyle {
     ZoomOut = 'zoom-out',
     None = 'none',
     ContextMenu = 'context-menu',
+    EWResize = 'ew-resize',
 }

package/src/styles/text.ts

@@ -38,7 +38,7 @@ export class TextStyle {
 
     #color: string;
 
-    #font: string;
+    #font: string | undefined;
 
     #weight: FontWeight;
 
@@ -47,14 +47,14 @@ export class TextStyle {
     constructor(config: TextStyleConfig | undefined) {
         this.#size = config?.size === undefined ? DefaultSize : config.size;
         this.#color = config?.color === undefined ? DefaultColor : config.color;
-        this.#font = config?.font === undefined ? Theme.FontFamily : config.font;
+        this.#font = config?.font;
         this.#weight = config?.weight === undefined ? FontWeight.Normal : config.weight;
         this.#fontStyle = config?.style === undefined ? FontStyle.Normal : config.style;
     }
 
     setupStyle(ctx: CanvasRenderingContext2D, scale: number): void {
         ctx.fillStyle = this.#color;
-        ctx.font = this.#fontStyle + " " + this.#weight + " " + (this.#size * scale) + "px " + this.#font;
+        ctx.font = this.#fontStyle + " " + this.#weight + " " + (this.#size * scale) + "px " + this.getFont();
     }
 
     getSize(): number {
@@ -62,7 +62,7 @@ export class TextStyle {
     }
 
     getFont(): string {
-        return this.#font;
+        return this.#font ?? Theme.FontFamily;
     }
 
     getWeight(): FontWeight {

package/src/theme.ts

@@ -1,92 +1,179 @@
-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"
-        },
-        Message: {
-            InfoColor: "#afb9bb",
-            WarnColor: "#f1f663ff",
-            ErrorColor: "#FF0000"
-        }
-    },
-    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",
-        DisabledFontColor: "#4a585c",
-    },
-    Minimap: {
-        BackgroundColor: "rgba(10, 16, 18, 0.85)",
-        BorderColor: "#1c1c1c",
-        BorderRadius: 4,
-        Padding: 6,
-        NodeColor: "#6b7f85",
-        ViewportColor: "rgba(175, 185, 187, 0.25)",
-    },
-    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,
-        }
-    }
-}
+import { requestRender } from "./render_scheduler";
+
+export interface BevelColors {
+    Light: string;
+    Dark: string;
+}
+
+const defaults = {
+    FontFamily: "Courier New",
+    Graph: {
+        BackgroundColor: "#07212a",
+        DotColor: "rgb(41, 54, 57)",
+    },
+    Node: {
+        FontColor: "#afb9bb",
+        BackgroundColor: "#0c2b35",
+        Title: {
+            Color: "#154050",
+            FontColor: "#afb9bb",
+            Padding: 5
+        },
+        BorderRadius: 15,
+        Border: {
+            Idle: "#1c1c1c",
+            MouseOver: "#8e8e8e",
+            Grabbed: "white",
+            Selected: "#6e6e6e"
+        },
+        Bevel: null as BevelColors | null,
+        Port: {
+            FontColor: "#afb9bb"
+        },
+        Message: {
+            InfoColor: "#afb9bb",
+            WarnColor: "#f1f663ff",
+            ErrorColor: "#FF0000"
+        }
+    },
+    BoxSelect: {
+        Color: "white",
+        Size: 1,
+        Radius: 2,
+        LineDashLength: 5,
+    },
+    Widget: {
+        FontColor: "#afb9bb",
+        LabelColor: "#7f9497",
+        FontSize: 14,
+        Padding: 6,
+        Gap: 4,
+        BackgroundColor: "#0f313c",
+        Border: {
+            Color: "#154050",
+            Size: 2,
+            Radius: 2
+        },
+        Bevel: null as BevelColors | null,
+        Hover: {
+            BackgroundColor: "#195366"
+        },
+        Input: {
+            BackgroundColor: "#0f313c",
+            HoverBackgroundColor: "#195366",
+            FontColor: "#afb9bb",
+        },
+        Slider: {
+            FillColor: "#07212A",
+        },
+        Button: {
+            Click: {
+                BackgroundColor: "#1f637a"
+            },
+        }
+    },
+    ContextMenu: {
+        BackgroundColor: "#07212A",
+        HighlightColor: "#205A6D",
+        HighlightFontColor: "#afb9bb",
+        FontColor: "#afb9bb",
+        DisabledFontColor: "#4a585c",
+        BorderRadius: 5,
+    },
+    Minimap: {
+        BackgroundColor: "rgba(10, 16, 18, 0.85)",
+        BorderColor: "#1c1c1c",
+        BorderRadius: 4,
+        Padding: 6,
+        NodeColor: "#6b7f85",
+        ViewportColor: "rgba(175, 185, 187, 0.25)",
+    },
+    Popup: {
+        BackgroundColor: "#000000",
+        FontColor: "#ffffff",
+        FontFamily: "Verdana",
+        BorderRadius: 8,
+        Backdrop: "#00000070",
+    },
+    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",
+            FontColor: "#afb9bb",
+            Padding: 16,
+            BorderRadius: 4,
+        }
+    }
+};
+
+export type ThemeValues = typeof defaults;
+
+type DeepPartial<T> = {
+    [K in keyof T]?: T[K] extends object | null
+        ? (null extends T[K] ? T[K] : DeepPartial<T[K]>)
+        : T[K];
+};
+
+export type ThemeConfig = DeepPartial<ThemeValues>;
+
+function clone<T>(value: T): T {
+    return JSON.parse(JSON.stringify(value));
+}
+
+function merge(target: any, source: any): any {
+    if (source === undefined) {
+        return target;
+    }
+    if (source === null || typeof source !== "object" || target === null || typeof target !== "object") {
+        return source;
+    }
+    for (const key of Object.keys(source)) {
+        target[key] = merge(target[key], source[key]);
+    }
+    return target;
+}
+
+export const DefaultTheme: Readonly<ThemeValues> = Object.freeze(clone(defaults));
+
+export const Theme: ThemeValues = clone(defaults);
+
+let version = 0;
+
+const listeners = new Set<() => void>();
+
+/**
+ * Replaces the theme: the defaults, with anything in config laid over them.
+ * Everything already on screen picks the change up on its next draw.
+ */
+export function setTheme(config?: ThemeConfig): void {
+    const next = merge(clone(defaults), config);
+    for (const key of Object.keys(next) as Array<keyof ThemeValues>) {
+        (Theme as any)[key] = next[key];
+    }
+    version++;
+    listeners.forEach((listener) => listener());
+    requestRender();
+}
+
+export function themeVersion(): number {
+    return version;
+}
+
+export function onThemeChange(listener: () => void): () => void {
+    listeners.add(listener);
+    return () => listeners.delete(listener);
+}

package/src/types/text.ts

@@ -1,4 +1,5 @@
 import { requestRender } from "../render_scheduler";
+import { themeVersion } from "../theme";
 import { FontWeight, TextStyle, TextStyleConfig } from "../styles/text";
 import { splitString, splitStringIntoLines } from "../utils/string";
 import { CopyVector2, ScaleVector, Vector2, Zero } from "./vector2";
@@ -12,6 +13,8 @@ export class Text {
 
     #measured: boolean
 
+    #measuredForTheme = -1;
+
     #size: Vector2;
 
     #style: TextStyle;
@@ -110,9 +113,10 @@ export class Text {
     }
 
     #measure(ctx: CanvasRenderingContext2D): void {
-        if (this.#measured) {
+        if (this.#measured && this.#measuredForTheme === themeVersion()) {
             return;
         }
+        this.#measuredForTheme = themeVersion();
 
 
         this.#style.setupStyle(ctx, 1);

package/src/utils/color.ts

@@ -22,7 +22,7 @@ export function RgbToHex(c: Color): string {
 }
 
 export function HexToColor(hex: string): Color | null {
-    var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+    var result = /^#?([a-f\d]{2})([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,