@elicdavis/node-flow 0.1.0

package/src/quickMenu.ts

@@ -0,0 +1,330 @@
+import { ContextMenuConfig, ContextMenuItemConfig } from "./contextMenu";
+import { ContainerRenderElement as ContainerElement } from "./elements/container";
+import { IRenderElement } from "./elements/interfaces";
+import { TextAlign, TextElement as TextElement, VerticalAlign } from "./elements/text";
+import { FontWeight } from "./styles/text";
+import { Theme } from "./theme";
+import { Text } from './types/text';
+import { ScaleVector, Vector2 } from './types/vector2';
+import { Display } from './elements/base';
+
+class QuickMenuGroup {
+
+    #text: TextElement;
+
+    public items: Array<QuickMenuItem>;
+
+    constructor(text: TextElement, items: Array<QuickMenuItem>) {
+        this.#text = text;
+        this.items = items;
+    }
+
+    updateRendering(terms: Array<string>): void {
+        let shouldRender = false;
+        for (let i = 0; i < this.items.length; i++) {
+            const kept = this.items[i].filter(terms);
+            this.items[i].render(kept);
+            if (kept) {
+                shouldRender = true;
+            }
+        }
+
+        this.#text.setDisplay(shouldRender ? Display.Flex : Display.None);
+    }
+
+}
+
+class QuickMenuItem {
+    #searchText: string;
+    #text: TextElement;
+    #context: ContextMenuItemConfig
+
+    constructor(searchText: string, text: TextElement, context: ContextMenuItemConfig) {
+        this.#searchText = searchText.toLowerCase();
+        this.#text = text;
+        this.#context = context;
+    }
+
+    filter(terms: Array<string>): boolean {
+        if (terms.length === 0) {
+            return true;
+        }
+        for (let i = 0; i < terms.length; i++) {
+            if (terms[i] === "") {
+                continue;
+            }
+
+            if (this.#searchText.indexOf(terms[i]) === -1) {
+                return false;
+            }
+        }
+        return true;
+    }
+
+    render(render: boolean): void {
+        this.#text.setDisplay(render ? Display.Flex : Display.None);
+    }
+
+    rendering(): boolean {
+        return this.#text.getDisplay() === Display.Flex;
+    }
+
+    highlight(highlight: boolean): void {
+        this.#text.setBackgroundColor(highlight ? Theme.ContextMenu.HighlightColor : "");
+    }
+
+    select(): void {
+        if (this.#context.callback) {
+            this.#context.callback()
+        }
+    }
+}
+
+function RecurseBuildContainers(
+    path: string,
+    config: ContextMenuConfig,
+    renderElements: Array<IRenderElement>,
+    groups: Array<QuickMenuGroup>
+): void {
+
+    let currentPath = config?.name ?? "";
+    if (path !== "") {
+        currentPath = path + " / " + currentPath;
+    }
+
+    if (config?.items && config.items.length > 0) {
+        const titleText = new TextElement(
+            new Text(
+                currentPath,
+                {
+                    color: Theme.ContextMenu.FontColor,
+                    weight: FontWeight.Bold,
+                    size: 12,
+                }
+            ),
+            {
+                Align: TextAlign.Center,
+                VerticalAlign: VerticalAlign.Center,
+                Padding: 16
+            }
+        );
+        renderElements.push(titleText);
+
+        const quickItems = new Array<QuickMenuItem>();
+
+        for (let i = 0; i < config.items.length; i++) {
+            const configItem = config.items[i];
+
+            const itemText = new TextElement(
+                new Text(
+                    configItem.name ?? "Item",
+                    {
+                        color: Theme.ContextMenu.FontColor,
+                    }
+                ),
+                {
+                    Padding: 8
+                }
+            );
+
+            quickItems.push(new QuickMenuItem(
+                currentPath + (configItem.name ?? ""),
+                itemText,
+                configItem
+            ));
+
+            renderElements.push(itemText);
+        }
+
+        groups.push(new QuickMenuGroup(titleText, quickItems));
+    }
+
+    if (config?.subMenus) {
+        for (let i = 0; i < config?.subMenus.length; i++) {
+            const configItem = config?.subMenus[i];
+            RecurseBuildContainers(currentPath, configItem, renderElements, groups);
+        }
+    }
+}
+
+export class QuickMenu {
+
+    #menuGroups: Array<QuickMenuGroup>
+
+    #container: ContainerElement
+
+    #searchText: Text;
+
+    #currentSelection: number;
+
+    constructor(config?: ContextMenuConfig) {
+        this.#menuGroups = [];
+        this.#currentSelection = 0;
+
+        this.#searchText = new Text(
+            "",
+            {
+                color: Theme.ContextMenu.FontColor,
+            }
+        );
+
+        const elements = [
+            new TextElement(
+                new Text(
+                    "Search",
+                    {
+                        color: Theme.ContextMenu.FontColor,
+                    }
+                ),
+                {
+                    Padding: {
+                        Bottom: 0,
+                        Left: 8,
+                        Right: 8,
+                        Top: 8
+                    },
+                }
+            ),
+
+            // Search Box...
+            new ContainerElement(
+                [
+                    new TextElement(
+                        this.#searchText,
+                        undefined
+                    ),
+                ],
+                {
+                    Border: {
+                        Radius: 2,
+                    },
+                    BackgroundColor: "#003847",
+                    Padding: 8,
+                    Margin: 8,
+                    MinHeight: 46,
+                }
+            ),
+        ]
+
+        if (config) {
+            RecurseBuildContainers("", config, elements, this.#menuGroups);
+        }
+
+        this.#container = new ContainerElement(
+            elements,
+            {
+                BackgroundColor: Theme.ContextMenu.BackgroundColor,
+                Border: {
+                    Thickness: 1,
+                    Radius: 4
+                }
+            }
+        )
+
+        this.#updateHighlighting();
+    }
+
+    execute(): void {
+        let selection = this.#currentSelection;
+
+        for (let groupIndex = 0; groupIndex < this.#menuGroups.length; groupIndex++) {
+            const group = this.#menuGroups[groupIndex];
+
+            for (let itemIndex = 0; itemIndex < group.items.length; itemIndex++) {
+                if (group.items[itemIndex].rendering()) {
+                    if (selection === 0) {
+                        group.items[itemIndex].select();
+                        return;
+                    }
+                    selection--;
+                }
+            }
+        }
+    }
+
+    #updateHighlighting(): void {
+        const searchText = this.#searchText
+            .get()
+            .trim()
+            .toLowerCase();
+
+        let terms = new Array<string>();
+        if (searchText !== "") {
+            var potentialTerms = searchText.split(" ");
+            for (let i = 0; i < potentialTerms.length; i++) {
+                const cleaned = potentialTerms[i].trim();
+                if (cleaned !== "") {
+                    terms.push(cleaned);
+                }
+            }
+        }
+
+        let selection = this.#currentSelection;
+
+        for (let groupIndex = 0; groupIndex < this.#menuGroups.length; groupIndex++) {
+            const group = this.#menuGroups[groupIndex];
+            group.updateRendering(terms);
+
+            for (let itemIndex = 0; itemIndex < group.items.length; itemIndex++) {
+                if (group.items[itemIndex].rendering()) {
+                    group.items[itemIndex].highlight(selection === 0)
+                    selection--;
+                }
+            }
+        }
+    }
+
+    keyboardEvent(event: KeyboardEvent): void {
+
+        let intercepted = true;
+
+        if (event.code === "Backspace") {
+            this.#currentSelection = 0;
+            const text = this.#searchText.get();
+            this.#searchText.set(text.slice(0, text.length - 1));
+        } else if (/^[a-zA-Z0-9]$/.test(event.key) || event.key === " ") {
+            this.#currentSelection = 0;
+            this.#searchText.set(this.#searchText.get() + event.key);
+        } else if (event.key === "ArrowUp") {
+            this.#currentSelection = Math.max(0, this.#currentSelection - 1);
+        } else if (event.key === "ArrowDown") {
+            this.#currentSelection ++;
+        } else {
+            intercepted = false;
+        }
+
+        if (intercepted) {
+            this.#updateHighlighting();
+            event.preventDefault();
+        }
+
+        // console.log(event);
+    }
+
+    renderSize = { x: 0, y: 0 };
+
+    public render(ctx: CanvasRenderingContext2D, pos: Vector2, graphScale: number, mousePosition: Vector2 | undefined): null {
+        this.#container.calcSize(ctx, this.renderSize, { x: -1, y: -1 });
+        // ScaleVector(this.renderSize, graphScale);
+
+        // Clamp the position so it's not spilling off the canvas
+        if (pos.y + Math.min(this.renderSize.y, 400) > ctx.canvas.clientHeight) {
+            pos.y = ctx.canvas.clientHeight - Math.min(this.renderSize.y, 400);
+        }
+
+        if (pos.x + this.renderSize.x > ctx.canvas.clientWidth) {
+            pos.x = ctx.canvas.clientWidth - this.renderSize.x;
+        }
+
+        if (pos.y < 0) {
+            pos.y = 0;
+        }
+
+        if (pos.x < 0) {
+            pos.x = 0;
+        }
+
+        this.#container.render(ctx, pos, 1, this.renderSize);
+        return null;
+    }
+}

package/src/styles/box.ts

@@ -0,0 +1,104 @@
+import { Box } from "../types/box";
+import { StrokeStyle, StrokeStyleConfig, StrokeStyleWithFallback } from "./stroke";
+
+export interface BoxStyleConfig {
+    border?: StrokeStyleConfig;
+    color?: string;
+    radius?: number;
+}
+
+export function BoxStyleWithFallback(input?: BoxStyleConfig, fallback?: BoxStyleConfig): BoxStyleConfig {
+    return {
+        radius: input?.radius === undefined ? fallback?.radius : input?.radius,
+        color: input?.color === undefined ? fallback?.color : input?.color,
+        border: StrokeStyleWithFallback(input?.border, fallback?.border)
+    };
+}
+
+export class BoxStyle {
+    #border: StrokeStyle | null;
+
+    #color: string;
+
+    #radius: number;
+
+    constructor(config?: BoxStyleConfig) {
+        this.#color = config?.color === undefined ? "#CCCCCC" : config.color;
+        this.#border = config?.border === undefined ? null : new StrokeStyle(config.border);
+        this.#radius = config?.radius === undefined ? 2 : config.radius;
+    }
+
+    #box(ctx: CanvasRenderingContext2D, box: Box, scale: number, radius: any): void {
+        ctx.fillStyle = this.#color
+        this.#border?.setupStyle(ctx, scale);
+        ctx.beginPath();
+        ctx.roundRect(
+            box.Position.x,
+            box.Position.y,
+            box.Size.x,
+            box.Size.y,
+            radius
+        );
+        ctx.fill();
+    }
+
+    #draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, radius: any): void {
+        this.#box(ctx, box, scale, radius);
+        ctx.stroke();
+    }
+
+    Outline(ctx: CanvasRenderingContext2D, box: Box, scale: number, radius: any): void {
+        this.#border?.setupStyle(ctx, scale);
+        ctx.beginPath();
+        ctx.roundRect(
+            box.Position.x,
+            box.Position.y,
+            box.Size.x,
+            box.Size.y,
+            radius
+        );
+        ctx.stroke();
+    }
+
+    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        this.#draw(ctx, box, scale, this.#radius * scale)
+    }
+
+    DrawRoundedTopOnly(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        this.#draw(ctx, box, scale, [this.#radius * scale * 2, this.#radius * scale * 2, 0, 0])
+    }
+
+    DrawUnderline(ctx: CanvasRenderingContext2D, box: Box, scale: number): void {
+        this.#box(ctx, box, scale, [this.#radius * scale * 2, this.#radius * scale * 2, 0, 0]);
+        ctx.beginPath();
+        ctx.moveTo(box.Position.x, box.Position.y + box.Size.y)
+        ctx.lineTo(box.Position.x + box.Size.x, box.Position.y + box.Size.y);
+        ctx.stroke();
+    }
+
+    borderSize(): number {
+        if (this.#border === null) {
+            return 0;
+        }
+        return this.#border.size();
+    }
+
+    radius(): number {
+        return this.#radius;
+    }
+
+    setColor(color: string): void {
+        this.#color = color;
+    }
+
+    setBorderColor(color: string): void {
+        if (this.#border === null) {
+            this.#border = new StrokeStyle({
+                color: color
+            })
+        } else {
+            this.#border.setColor(color);
+        }
+    }
+
+}

package/src/styles/canvasTextAlign.ts

@@ -0,0 +1,8 @@
+
+export const enum TextAlign {
+    Center = "center",
+    End = "end",
+    Left = "left",
+    Right = "right",
+    Start = "start"
+}

package/src/styles/canvasTextBaseline.ts

@@ -0,0 +1,9 @@
+
+export enum TextBaseline {
+    Alphabetic = "alphabetic",
+    Bottom = "bottom",
+    Hanging = "hanging",
+    Ideographic = "ideographic",
+    Middle = "middle",
+    Top = "top",
+}

package/src/styles/cursor.ts

@@ -0,0 +1,18 @@
+// https://developer.mozilla.org/en-US/docs/Web/CSS/cursor
+export enum CursorStyle {
+    Default = 'default',
+    Pointer = 'pointer',
+    Grab = 'grab',
+    Grabbing = 'grabbing',
+    Wait = 'wait',
+    Help = 'help',
+    Crosshair = 'crosshair',
+    Cell = 'cell',
+    Text = 'text',
+    Move = 'move',
+    NotAllowed = 'not-allowed',
+    ZoomIn = 'zoom-in',
+    ZoomOut = 'zoom-out',
+    None = 'none',
+    ContextMenu = 'context-menu',
+}

package/src/styles/stroke.ts

@@ -0,0 +1,39 @@
+export interface StrokeStyleConfig {
+    size?: number;
+    color?: string;
+}
+
+export function StrokeStyleWithFallback(input?: StrokeStyleConfig, fallback?: StrokeStyleConfig): StrokeStyleConfig {
+    return {
+        color: input?.color === undefined ? fallback?.color : input?.color,
+        size: input?.size === undefined ? fallback?.size : input?.size,
+    };
+}
+
+export class StrokeStyle {
+    #size: number;
+
+    #color: string;
+
+    constructor(config?: StrokeStyleConfig) {
+        this.#size = config?.size === undefined ? 0.5 : config.size;
+        this.#color = config?.color === undefined ? "black" : config.color;
+    }
+
+    setupStyle(ctx: CanvasRenderingContext2D, scale: number): void {
+        ctx.strokeStyle = this.#color;
+        ctx.lineWidth = scale * this.#size;
+    }
+
+    setColor(newColor: string): void {
+        this.#color = newColor;
+    }
+
+    setSize(newSize: number): void {
+        this.#size = newSize;
+    }
+
+    size(): number {
+        return this.#size;
+    }
+}

package/src/styles/text.ts

@@ -0,0 +1,90 @@
+import { Theme } from "../theme";
+import { Vector2 } from "../types/vector2";
+
+export enum FontWeight {
+    Normal = "",
+    Bold = "bold"
+}
+
+export enum FontStyle {
+    Normal = "",
+    Italic = "italic"
+}
+
+export interface TextStyleConfig {
+    size?: number;
+    color?: string;
+    font?: string;
+    weight?: FontWeight;
+    style?: FontStyle;
+}
+
+const DefaultSize: number = 16;
+const DefaultColor: string = "black";
+
+export function TextStyleFallback(input?: TextStyleConfig, fallback?: TextStyleConfig): TextStyleConfig {
+    return {
+        color: input?.color === undefined ? fallback?.color : input?.color,
+        size: input?.size === undefined ? fallback?.size : input?.size,
+        font: input?.font === undefined ? fallback?.font : input?.font,
+        style: input?.style === undefined ? fallback?.style : input?.style,
+        weight: input?.weight === undefined ? fallback?.weight : input?.weight,
+    };
+}
+
+export class TextStyle {
+
+    #size: number;
+
+    #color: string;
+
+    #font: string;
+
+    #weight: FontWeight;
+
+    #fontStyle: FontStyle;
+
+    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.#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;
+    }
+
+    getSize(): number {
+        return this.#size;
+    }
+
+    getFont(): string {
+        return this.#font;
+    }
+
+    measure(ctx: CanvasRenderingContext2D, scale: number, text: string, out: Vector2): void {
+        this.setupStyle(ctx, scale);
+        const measurements = ctx.measureText(text)
+        out.x = measurements.width;
+        out.y = measurements.actualBoundingBoxAscent + measurements.actualBoundingBoxDescent;
+    }
+
+    setColor(color: string): void {
+        this.#color = color;
+    }
+
+    getColor(): string {
+        return this.#color ;
+    }
+
+    setSize(size: number): void {
+        this.#size = size;
+    }
+
+    setWeight(weight: FontWeight): void {
+        this.#weight = weight;
+    }
+}

package/src/styles/textBox.ts

@@ -0,0 +1,82 @@
+import { Box } from "../types/box";
+import { BoxStyle, BoxStyleConfig, BoxStyleWithFallback } from "./box";
+import { TextAlign } from "./canvasTextAlign";
+import { TextBaseline } from "./canvasTextBaseline";
+import { TextStyle, TextStyleConfig, TextStyleFallback } from './text';
+
+
+export interface TextBoxStyleConfig {
+    box?: BoxStyleConfig;
+    text?: TextStyleConfig;
+
+    textAlign?: CanvasTextAlign;
+    textBaseline?: CanvasTextBaseline;
+}
+
+export function TextBoxStyleWithFallback(input?: TextBoxStyleConfig, fallback?: TextBoxStyleConfig): TextBoxStyleConfig {
+    return {
+        box: BoxStyleWithFallback(input?.box, fallback?.box),
+        text: TextStyleFallback(input?.text, fallback?.text),
+        
+        textAlign: input?.textAlign === undefined ? fallback?.textAlign : input?.textAlign,
+        textBaseline: input?.textBaseline === undefined ? fallback?.textBaseline : input?.textBaseline,
+    };
+}
+
+export class TextBoxStyle {
+    #box: BoxStyle;
+
+    #text: TextStyle;
+
+    #textAlign: CanvasTextAlign;
+
+    #textBaseline: CanvasTextBaseline;
+
+    constructor(config?: TextBoxStyleConfig) {
+        this.#box = new BoxStyle(config?.box);
+        this.#text = new TextStyle(config?.text);
+
+        this.#textAlign = config?.textAlign === undefined ? TextAlign.Center : config.textAlign;
+        this.#textBaseline = config?.textBaseline === undefined ? TextBaseline.Middle : config.textBaseline;
+    }
+
+    Draw(ctx: CanvasRenderingContext2D, box: Box, scale: number, text: string) {
+        this.#box.Draw(ctx, box, scale);
+
+        ctx.textAlign = this.#textAlign;
+        ctx.textBaseline = this.#textBaseline;
+        this.#text.setupStyle(ctx, scale);
+
+        ctx.fillText(
+            text,
+            box.Position.x + (box.Size.x / 2),
+            box.Position.y + (box.Size.y / 2),
+        );
+    }
+
+    DrawUnderline(ctx: CanvasRenderingContext2D, box: Box, scale: number, text: string) {
+        this.#box.DrawUnderline(ctx, box, scale);
+
+        ctx.textAlign = this.#textAlign;
+        ctx.textBaseline = this.#textBaseline;
+        this.#text.setupStyle(ctx, scale);
+
+        ctx.fillText(
+            text,
+            box.Position.x + (box.Size.x / 2),
+            box.Position.y + (box.Size.y / 2),
+        );
+    }
+
+    setTextColor(color: string): void {
+        this.#text.setColor(color);
+    }
+
+    setBoxColor(color: string): void {
+        this.#box.setColor(color);
+    }
+
+    setBorderColor(color: string): void {
+        this.#box.setBorderColor(color);
+    }
+}