@elicdavis/node-flow 0.1.0

package/src/input.ts

@@ -0,0 +1,153 @@
+import { CopyVector2, SubVector2, Vector2, Zero } from "./types/vector2";
+
+export class MouseObserver {
+
+    #clicked: boolean;
+
+    #lastTouch: Vector2;
+
+    #ele: HTMLElement
+
+    #lastMousePosition: Vector2;
+
+    #dragCallback: (delta: Vector2) => void
+    #moveCallback: (position: Vector2) => void
+    #clickStart: (position: Vector2, shiftOrCtrl: boolean) => void
+    #clickStop: () => void
+    #contextMenu: (position: Vector2) => void
+
+    constructor(
+        ele: HTMLElement,
+        dragCallback: (delta: Vector2) => void,
+        moveCallback: (position: Vector2) => void,
+        clickStart: (position: Vector2, shiftOrCtrl: boolean) => void,
+        clickStop: () => void,
+        contextMenu: (position: Vector2) => void,
+        fileDrop: (file: File) => void
+    ) {
+        this.#ele = ele;
+        this.#dragCallback = dragCallback;
+        this.#moveCallback = moveCallback;
+        this.#clickStart = clickStart;
+        this.#clickStop = clickStop;
+        this.#contextMenu = contextMenu;
+
+        this.#clicked = false;
+        this.#lastTouch = Zero();
+        this.#lastMousePosition = Zero();
+
+        // Down
+        ele.addEventListener('mousedown', this.#down.bind(this), false);
+        ele.addEventListener('touchstart', this.#touchDown.bind(this), false);
+
+        // Up
+        document.addEventListener('mouseup', this.#up.bind(this), false);
+        document.addEventListener('touchend', this.#up.bind(this), false);
+
+        // Move
+        ele.addEventListener('mousemove', this.#move.bind(this), false);
+        ele.addEventListener('touchmove', this.#moveTouch.bind(this), false);
+
+        ele.addEventListener('drop', (ev) => {
+            ev.preventDefault();
+            console.log(ev)
+
+            if (ev.dataTransfer?.items) {
+                // Use DataTransferItemList interface to access the file(s)
+                [...ev.dataTransfer.items].forEach((item, i) => {
+                    // If dropped items aren't files, reject them
+                    if (item.kind === "file") {
+                        const file = item.getAsFile();
+                        if (file) {
+                            fileDrop(file);
+                            console.log(file)
+                            console.log(`… file[${i}].name = ${file.name}`);
+                        }
+                    }
+                });
+            } else if (ev.dataTransfer) {
+                // Use DataTransfer interface to access the file(s)
+                [...ev.dataTransfer.files].forEach((file, i) => {
+                    console.log(`… file[${i}].name = ${file.name}`);
+                });
+            }
+        });
+
+        ele.addEventListener('dragover', (ev) => {
+            ev.preventDefault();
+            this.#moveCallback(this.#mousePosition(ev));
+            // console.log(ev)
+        });
+
+        // Context
+        ele.addEventListener('contextmenu', (evt) => {
+            contextMenu(this.#mousePosition(evt));
+            evt.preventDefault()
+        }, false);
+    }
+
+    #mousePosition(event: MouseEvent | DragEvent): Vector2 {
+        var rect = this.#ele.getBoundingClientRect();
+        return {
+            x: event.clientX - rect.left,
+            y: event.clientY - rect.top
+        }
+    }
+
+    #move(event: MouseEvent): void {
+        const pos = this.#mousePosition(event);
+
+        if (this.#clicked) {
+            const delta = Zero();
+            SubVector2(delta, pos, this.#lastMousePosition);
+            this.#dragCallback(delta)
+        }
+
+        this.#moveCallback(pos);
+        CopyVector2(this.#lastMousePosition, pos);
+    }
+
+    #moveTouch(event: TouchEvent): void {
+        const rect = this.#ele.getBoundingClientRect();
+        const pos = {
+            x: event.touches[0].clientX - rect.left,
+            y: event.touches[0].clientY - rect.top
+        }
+        this.#moveCallback(pos);
+
+        if (this.#clicked) {
+            this.#dragCallback({
+                x: pos.x - this.#lastTouch.x,
+                y: pos.y - this.#lastTouch.y,
+            });
+        }
+
+        CopyVector2(this.#lastTouch, pos);
+    }
+
+    #down(event: MouseEvent): void {
+        // Only register left clicks
+        if (event.button !== 0) {
+            return;
+        }
+        this.#clicked = true;
+        this.#clickStart(this.#mousePosition(event), event.ctrlKey || event.shiftKey);
+    }
+
+    #touchDown(event: TouchEvent) {
+        this.#clicked = true;
+        const rect = this.#ele.getBoundingClientRect();
+        this.#lastTouch.x = event.touches[0].clientX - rect.left;
+        this.#lastTouch.y = event.touches[0].clientY - rect.top;
+        this.#clickStart(this.#lastTouch, false);
+    }
+
+    #up(event: MouseEvent): void {
+        // Only register left clicks
+        if (event.button !== 0) {
+            return;
+        }
+        this.#clicked = false
+        this.#clickStop();
+    }
+}

package/src/markdown/entry.ts

@@ -0,0 +1,323 @@
+import { Theme } from "../theme";
+import { List } from "../types/list";
+import { Text } from "../types/text";
+import { CopyVector2, Vector2, Zero } from "../types/vector2";
+
+export interface MarkdownEntry {
+    render(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, maxWidth: number): number
+}
+
+export class CodeBlockEntry {
+
+    #text: Text
+
+    #calculatedPositions: List<Vector2>
+
+    #calculatedEntries: List<Text>
+
+    #calculatedForWidth: number;
+
+    constructor(text: Text) {
+        this.#text = text;
+        this.#calculatedForWidth = -1
+
+        this.#calculatedEntries = new List<Text>();
+        this.#calculatedPositions = new List<Vector2>();
+
+        document.fonts.addEventListener("loadingdone", (event) => {
+            this.#calculatedForWidth = -1
+        });
+    }
+
+    #calculateLayout(ctx: CanvasRenderingContext2D, maxWidth: number): void {
+        if (this.#calculatedForWidth === maxWidth) {
+            return;
+        }
+
+        let adjustedWith = maxWidth;
+        adjustedWith -= Theme.Note.CodeBlock.Padding * 2;
+
+        this.#calculatedEntries.Clear();
+        this.#calculatedPositions.Clear();
+
+        let curHeight = 0;
+        const lineInc = this.#text.style().getSize() + Theme.Note.LineSpacing;
+
+        let entries = this.#text.split("\n")
+
+        for (let entryIndex = 0; entryIndex < entries.length; entryIndex++) {
+            const entry = entries[entryIndex];
+
+            let lines = entry.breakIntoLines(ctx, adjustedWith);
+            for (let lineIndex = 0; lineIndex < lines.length; lineIndex++) {
+
+                this.#calculatedEntries.Push(lines[lineIndex])
+                this.#calculatedPositions.Push({
+                    x: 0,
+                    y: curHeight,
+                })
+                
+                curHeight += lineInc;
+            }
+        }
+
+        this.#calculatedForWidth = maxWidth;
+    }
+
+    render(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, maxWidth: number): number {
+        this.#calculateLayout(ctx, maxWidth);
+
+        let padding = Theme.Note.CodeBlock.Padding * scale;
+
+        let max = 0;
+        for (let i = 0; i < this.#calculatedEntries.Count(); i++) {
+            const pos = this.#calculatedPositions.At(i);
+            max = Math.max(max, pos.y * scale)
+        }
+
+        const y = position.y + max + (scale * 5)
+        ctx.fillStyle = Theme.Note.CodeBlock.BackgroundColor;
+        ctx.beginPath();
+        ctx.roundRect(
+            position.x,
+            position.y,
+            maxWidth * scale,
+            max + (padding * 2),
+            Theme.Note.CodeBlock.BorderRadius * scale
+        );
+        ctx.fill();
+
+
+        for (let i = 0; i < this.#calculatedEntries.Count(); i++) {
+            const entry = this.#calculatedEntries.At(i);
+            const pos = this.#calculatedPositions.At(i);
+
+            entry.render(ctx, scale, {
+                x: (pos.x * scale) + position.x + padding,
+                y: (pos.y * scale) + position.y + padding
+            });
+
+            max = Math.max(max, pos.y * scale)
+        }
+
+
+        return max + (padding * 2);
+    }
+}
+
+export class UnorderedListMarkdownEntry {
+
+    #entries: Array<BasicMarkdownEntry>;
+
+    constructor(entries: Array<BasicMarkdownEntry>) {
+        this.#entries = entries;
+    }
+
+    render(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, maxWidth: number): number {
+        let offset = 0;
+        let shift = 20;
+
+        let pos = {
+            x: position.x + (shift * scale),
+            y: position.y
+        }
+
+        let dot = Theme.Note.DotSize * scale;
+
+        for (let i = 0; i < this.#entries.length; i++) {
+
+            ctx.beginPath();
+            ctx.arc(position.x + dot, pos.y + (dot * 3), dot, 0, 2 * Math.PI);
+            ctx.fill();
+
+            offset += this.#entries[i].render(ctx, pos, scale, maxWidth - shift) + (scale * Theme.Note.LineSpacing * 2);
+            pos.y = position.y + offset;
+        }
+
+        return offset;
+    }
+}
+
+export class BasicMarkdownEntry {
+
+    #underline: boolean;
+
+    #background: boolean;
+
+    #entries: Array<Text>
+
+    #calculatedPositions: List<Vector2>
+
+    #calculatedEntries: List<Text>
+
+    #calculatedForWidth: number;
+
+    constructor(lines: Array<Text>, underline: boolean, background: boolean) {
+        this.#entries = lines;
+        this.#underline = underline;
+        this.#background = background;
+        this.#calculatedForWidth = -1
+
+        this.#calculatedEntries = new List<Text>();
+        this.#calculatedPositions = new List<Vector2>();
+
+        document.fonts.addEventListener("loadingdone", (event) => {
+            this.#calculatedForWidth = -1
+        });
+    }
+
+    #calculateLayout(ctx: CanvasRenderingContext2D, maxWidth: number): void {
+        if (this.#calculatedForWidth === maxWidth) {
+            return;
+        }
+
+        let adjustedWith = maxWidth;
+        if (this.#background) {
+            adjustedWith -= Theme.Note.CodeBlock.Padding * 2;
+        }
+
+        this.#calculatedEntries.Clear();
+        this.#calculatedPositions.Clear();
+
+        const curPosition: Vector2 = Zero();
+        const texSize: Vector2 = Zero();
+
+        let currentLineHeight = 0;
+        const currentLineText = new List<Text>();
+        const currentLineWidths = new List<number>();
+
+        for (let entryIndex = 0; entryIndex < this.#entries.length; entryIndex++) {
+            const entry = this.#entries[entryIndex];
+
+            let lines = entry.splitAtWidth(ctx, adjustedWith - curPosition.x);
+            let i = 0;
+            while (lines.length > 1 && i < 100) {
+                i++
+
+                // We can't collapse this thing any further. Break out of the 
+                // while loop before we have infinite loop on our hands
+                // if (lines[0].get() === "" && lines[1].get().length === 1) {
+                //     lines[0] = lines[1];
+                //     break;
+                // }
+
+                // We can't collapse this thing any further. Break out of the 
+                // while loop before we have infinite loop on our hands
+                if (lines[0].get() === "" && currentLineText.Count() === 0) {
+
+                    if (lines[1].get().length === 1) {
+                        lines[0] = lines[1];
+                        break;
+                    } else {
+                        lines = lines[1].splitAtIndex(1);
+                    }
+
+                }
+
+                // This effectiviely finishes off the line we're currenly working on.
+                if (lines[0].get() !== "") {
+                    lines[0].size(ctx, 1, texSize);
+                    currentLineHeight = Math.max(currentLineHeight, texSize.y);
+
+                    currentLineText.Push(lines[0]);
+                    currentLineWidths.Push(curPosition.x);
+                }
+
+                curPosition.y += currentLineHeight;
+
+                // Take everything we're working with and finalize it
+                for (let i = 0; i < currentLineText.Count(); i++) {
+                    this.#calculatedEntries.Push(currentLineText.At(i));
+                    this.#calculatedPositions.Push({ x: currentLineWidths.At(i), y: curPosition.y })
+                }
+
+                currentLineText.Clear();
+                currentLineWidths.Clear();
+
+                curPosition.y += Theme.Note.LineSpacing;
+                currentLineHeight = 0;
+                curPosition.x = 0;
+
+                lines = lines[1].splitAtWidth(ctx, adjustedWith);
+            }
+            if (i === 100) {
+                console.log(lines)
+            }
+
+            lines[0].size(ctx, 1, texSize);
+            currentLineHeight = Math.max(currentLineHeight, texSize.y)
+
+            currentLineText.Push(lines[0]);
+            currentLineWidths.Push(curPosition.x);
+
+            curPosition.x += texSize.x;
+        }
+
+        curPosition.y += currentLineHeight;
+
+        // Take everything we're working with and finalize it
+        for (let i = 0; i < currentLineText.Count(); i++) {
+            this.#calculatedEntries.Push(currentLineText.At(i));
+            this.#calculatedPositions.Push({ x: currentLineWidths.At(i), y: curPosition.y })
+        }
+
+        this.#calculatedForWidth = maxWidth;
+    }
+
+    render(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, maxWidth: number): number {
+        this.#calculateLayout(ctx, maxWidth);
+
+        let padding = 0;
+        if (this.#background) {
+            padding += Theme.Note.CodeBlock.Padding * scale;
+        }
+
+
+        if (this.#background) {
+            let max = 0;
+            for (let i = 0; i < this.#calculatedEntries.Count(); i++) {
+                const pos = this.#calculatedPositions.At(i);
+                max = Math.max(max, pos.y * scale)
+            }
+
+            const y = position.y + max + (scale * 5)
+            ctx.fillStyle = Theme.Note.CodeBlock.BackgroundColor;
+            ctx.beginPath();
+            ctx.roundRect(
+                position.x,
+                position.y,
+                maxWidth * scale,
+                max + (padding * 2),
+                Theme.Note.CodeBlock.BorderRadius * scale
+            );
+            ctx.fill();
+        }
+
+
+        let max = 0;
+        for (let i = 0; i < this.#calculatedEntries.Count(); i++) {
+            const entry = this.#calculatedEntries.At(i);
+            const pos = this.#calculatedPositions.At(i);
+
+            entry.render(ctx, scale, {
+                x: (pos.x * scale) + position.x + padding,
+                y: (pos.y * scale) + position.y + padding
+            });
+
+            max = Math.max(max, pos.y * scale)
+        }
+
+        // Add underline 
+        if (this.#underline) {
+            const y = position.y + max + (scale * 5)
+            ctx.strokeStyle = Theme.Note.FontColor;
+            ctx.lineWidth = Theme.Note.HeaderLineWidth * scale;
+            ctx.beginPath();
+            ctx.moveTo(position.x, y);
+            ctx.lineTo(position.x + (maxWidth * scale), y);
+            ctx.stroke();
+        }
+
+        return max + (padding * 2);
+    }
+}

package/src/markdown/lexicalParser.ts

@@ -0,0 +1,148 @@
+import { MarkdownToken, MarkdownTokenType } from "./token";
+
+export class MarkdownLexicalParser {
+
+    #body: string;
+
+    #index: number
+
+    #tokens: Array<MarkdownToken>;
+
+    constructor(body: string) {
+        this.#index = 0;
+        this.#body = body;
+        this.#tokens = new Array<MarkdownToken>();
+    }
+
+    tokens(): Array<MarkdownToken> {
+        return this.#tokens;
+    }
+
+    #current(): string {
+        if (this.#index > this.#body.length - 1) {
+            return ""
+        }
+        return this.#body.charAt(this.#index);
+    }
+
+    #inc(): void {
+        this.#index++
+    }
+
+    #next(): string {
+        this.#index++
+        if (this.#index > this.#body.length - 1) {
+            return ""
+        }
+        return this.#body.charAt(this.#index);
+    }
+
+    #lastToken = 0;
+    
+    #addToken(token: MarkdownTokenType, lexeme: string): void {
+        this.#tokens.push(new MarkdownToken(token, lexeme, this.#lastToken, this.#index));
+        this.#lastToken = this.#index;
+    }
+
+    #h2(): void {
+        let char = this.#next();
+        if (char === "#") {
+            this.#addToken(MarkdownTokenType.H3, "###");
+
+            // Move it off the character for the next reading
+            this.#inc();
+        } else {
+            this.#addToken(MarkdownTokenType.H2, "##");
+        }
+    }
+
+    #h1(): void {
+        let char = this.#next();
+        if (char === "#") {
+            this.#h2();
+        } else {
+            this.#addToken(MarkdownTokenType.H1, "#");
+        }
+    }
+
+    #whiteSpace(): void {
+        let char = this.#current();
+
+        while (char !== "") {
+            if (char !== " " && char !== "\t") {
+                break;
+            }
+            char = this.#next();
+        }
+
+        this.#addToken(MarkdownTokenType.Space, " ")
+    }
+
+    #text(): void {
+        let char = this.#current();
+
+        let started = -1;
+
+        while (char !== "") {
+            if (char === " " || char === "\t") {
+
+                // Eat white space if we haven't seen anything yet!
+                if (started === -1) {
+                    this.#inc();
+                    continue;
+                }
+            }
+
+            // End of the line!
+            if (char === "\n" || char === "*" || char === "`") {
+                if (started != -1) {
+                    this.#addToken(MarkdownTokenType.Text, this.#body.substring(started, this.#index))
+                }
+                return;
+            }
+
+
+            if (started === -1) {
+                started = this.#index;
+            }
+
+            char = this.#next();
+        }
+
+        if (started != -1) {
+            this.#addToken(MarkdownTokenType.Text, this.#body.substring(started, this.#index))
+        }
+    }
+
+    // S( ) => S
+    // S(\t) => S
+    // S(#) => H1
+    // H1(#) => H2
+    // H1(!#) => S
+    // H2(#) => H3
+    // H2(#) => H3
+    parse(): void {
+        let char = this.#current();
+
+        while (char !== "") {
+            if (char === " " || char === "\t") {
+                this.#whiteSpace();
+            } else if (char === "#") {
+                this.#h1();
+            } else if (char === "\n") {
+                this.#addToken(MarkdownTokenType.NewLine, "\n");
+                this.#inc();
+            } else if (char === "*") {
+                this.#addToken(MarkdownTokenType.Star, "*");
+                this.#inc();
+            } else if (char === "`") {
+                this.#addToken(MarkdownTokenType.BackTick, "`");
+                this.#inc();
+            } else {
+                this.#text();
+            }
+
+            char = this.#current();
+        }
+    }
+}

package/src/markdown/markdown.ts

@@ -0,0 +1,14 @@
+import { MarkdownEntry } from "./entry";
+import { MarkdownLexicalParser } from "./lexicalParser";
+import { MarkdownSyntaxParser } from "./syntaxParser";
+
+export function BuildMarkdown(data: string): Array<MarkdownEntry> {
+    const lexicalParser = new MarkdownLexicalParser(data);
+    lexicalParser.parse();
+    // console.log(lexicalParser.tokens());
+
+    const syntaxParser = new MarkdownSyntaxParser(data, lexicalParser.tokens());
+    const contents = syntaxParser.parse()
+    // console.log(contents);
+    return contents;
+}