@elicdavis/node-flow 0.1.15 → 0.1.17

package/src/markdown/entry.ts

@@ -1,12 +1,23 @@
+import { requestRender } from "../render_scheduler";
 import { Theme } from "../theme";
 import { List } from "../types/list";
 import { Text } from "../types/text";
-import { CopyVector2, Vector2, Zero } from "../types/vector2";
+import { Vector2, Zero } from "../types/vector2";
 
 export interface MarkdownEntry {
     render(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, maxWidth: number): number
 }
 
+function onFontsLoaded(callback: () => void): void {
+    if (typeof document === "undefined" || document.fonts === undefined) {
+        return;
+    }
+    document.fonts.addEventListener("loadingdone", () => {
+        callback();
+        requestRender();
+    });
+}
+
 export class CodeBlockEntry {
 
     #text: Text
@@ -17,6 +28,10 @@ export class CodeBlockEntry {
 
     #calculatedForWidth: number;
 
+    text(): Text {
+        return this.#text;
+    }
+
     constructor(text: Text) {
         this.#text = text;
         this.#calculatedForWidth = -1
@@ -24,7 +39,7 @@ export class CodeBlockEntry {
         this.#calculatedEntries = new List<Text>();
         this.#calculatedPositions = new List<Vector2>();
 
-        document.fonts.addEventListener("loadingdone", (event) => {
+        onFontsLoaded(() => {
             this.#calculatedForWidth = -1
         });
     }
@@ -113,6 +128,10 @@ export class UnorderedListMarkdownEntry {
         this.#entries = entries;
     }
 
+    entries(): ReadonlyArray<BasicMarkdownEntry> {
+        return this.#entries;
+    }
+
     render(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, maxWidth: number): number {
         let offset = 0;
         let shift = 20;
@@ -152,6 +171,10 @@ export class BasicMarkdownEntry {
 
     #calculatedForWidth: number;
 
+    lines(): ReadonlyArray<Text> {
+        return this.#entries;
+    }
+
     constructor(lines: Array<Text>, underline: boolean, background: boolean) {
         this.#entries = lines;
         this.#underline = underline;
@@ -161,7 +184,7 @@ export class BasicMarkdownEntry {
         this.#calculatedEntries = new List<Text>();
         this.#calculatedPositions = new List<Vector2>();
 
-        document.fonts.addEventListener("loadingdone", (event) => {
+        onFontsLoaded(() => {
             this.#calculatedForWidth = -1
         });
     }

package/src/markdown/lexicalParser.ts

@@ -37,32 +37,27 @@ export class MarkdownLexicalParser {
         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;
-    }
+    #tokenStart = 0;
 
-    #h2(): void {
-        let char = this.#next();
-        if (char === "#") {
-            this.#addToken(MarkdownTokenType.H3, "###");
+    #addToken(token: MarkdownTokenType, lexeme: string, start?: number): void {
+        this.#tokens.push(new MarkdownToken(token, lexeme, start ?? this.#tokenStart, this.#index));
+    }
 
-            // Move it off the character for the next reading
+    #header(): void {
+        let count = 0;
+        while (this.#current() === "#") {
+            count++;
             this.#inc();
-        } else {
-            this.#addToken(MarkdownTokenType.H2, "##");
         }
-    }
 
-    #h1(): void {
-        let char = this.#next();
-        if (char === "#") {
-            this.#h2();
-        } else {
-            this.#addToken(MarkdownTokenType.H1, "#");
+        let type = MarkdownTokenType.H3;
+        if (count === 1) {
+            type = MarkdownTokenType.H1;
+        } else if (count === 2) {
+            type = MarkdownTokenType.H2;
         }
+
+        this.#addToken(type, "#".repeat(count));
     }
 
     #whiteSpace(): void {
@@ -110,34 +105,29 @@ export class MarkdownLexicalParser {
         }
 
         if (started != -1) {
-            this.#addToken(MarkdownTokenType.Text, this.#body.substring(started, this.#index))
+            this.#addToken(MarkdownTokenType.Text, this.#body.substring(started, this.#index), started)
         }
     }
 
-    // S( ) => S
-    // S(\t) => S
-    // S(#) => H1
-    // H1(#) => H2
-    // H1(!#) => S
-    // H2(#) => H3
-    // H2(#) => H3
     parse(): void {
         let char = this.#current();
 
         while (char !== "") {
+            this.#tokenStart = this.#index;
+
             if (char === " " || char === "\t") {
                 this.#whiteSpace();
             } else if (char === "#") {
-                this.#h1();
+                this.#header();
             } else if (char === "\n") {
-                this.#addToken(MarkdownTokenType.NewLine, "\n");
                 this.#inc();
+                this.#addToken(MarkdownTokenType.NewLine, "\n");
             } else if (char === "*") {
-                this.#addToken(MarkdownTokenType.Star, "*");
                 this.#inc();
+                this.#addToken(MarkdownTokenType.Star, "*");
             } else if (char === "`") {
-                this.#addToken(MarkdownTokenType.BackTick, "`");
                 this.#inc();
+                this.#addToken(MarkdownTokenType.BackTick, "`");
             } else {
                 this.#text();
             }

package/src/markdown/syntaxParser.ts

@@ -31,21 +31,18 @@ export class MarkdownSyntaxParser {
 
     #next(): MarkdownToken | null {
         this.#index++
-        if (this.#index >= this.#tokens.length - 1) {
+        if (this.#index >= this.#tokens.length) {
             return null
         }
         return this.#tokens[this.#index];
     }
 
     #peak(): MarkdownToken | null {
-        if (this.#index + 1 >= this.#tokens.length - 1) {
-            return null
-        }
-        return this.#tokens[this.#index + 1];
+        return this.#peakInto(1);
     }
 
     #peakInto(amount: number): MarkdownToken | null {
-        if (this.#index + amount >= this.#tokens.length - 1) {
+        if (this.#index + amount >= this.#tokens.length) {
             return null
         }
         return this.#tokens[this.#index + amount];
@@ -53,82 +50,107 @@ export class MarkdownSyntaxParser {
 
     #emphasis(): Array<Text> {
 
-        // Cases to consider
-        // =================
-        // 1.  *a*:      <i>a</i>
-        // 2.  **a**:    <b>a</b>
-        // 3.  **a*:     *<i>a</i> <----- fuck this one
-        // 4.  ***a**:   *<b>a</b> <----- fuck this one
-        // 5.  *a**:     <i>a</i>*
-        // 6.  **a***:   <b>a</b>*
-        // 7.  * a *:    * a *
-        // 8.  ** a **:  ** a **
-        // 9.  **a **:   **a **
-        // 10. **a f**:  <b>a f<b>
-        // 11. * Test:   <ul>Test</ul> 
-
-        let token = this.#next();
-        if (token?.type() === MarkdownTokenType.Space) {
+        // Count the stars either side of the content and match as many as
+        // both ends can supply; the rest stay on the line as characters.
+        //
+        // *a*     -> <i>a</i>          **a*    -> *<i>a</i>
+        // **a**   -> <b>a</b>          *a**    -> <i>a</i>*
+        // **a f** -> <b>a f</b>        *a      -> *a
+        // ** a ** -> ** a **           **a **  -> **a **
+
+        // A star with a space after it opens nothing, so leave the space
+        // where it is rather than consuming it - the caller still has to
+        // read it as part of the line.
+        if (this.#peak()?.type() === MarkdownTokenType.Space) {
             return [new Text("*")];
         }
 
-        let bold = false;
-        // Read off all leading stars
-        while (token !== null && token.type() === MarkdownTokenType.Star) {
-            bold = true;
-            token = this.#next();
-        }
-
-        let textContent = "";
+        const openers = this.#runOfStars();
 
-        let boldClosed = false;
-        let startingClose = false;
-        let validClose = false;
-        while (token !== null && token.type() !== MarkdownTokenType.NewLine) {
+        let content = "";
+        let closers = 0;
+        while (true) {
+            const token = this.#current();
+            if (token === null || token.type() === MarkdownTokenType.NewLine) {
+                break;
+            }
             if (token.type() === MarkdownTokenType.Star) {
+                closers = this.#runOfStars();
+                break;
+            }
+            content += token.lexeme();
+            this.#inc();
+        }
 
-                // This is the second star we've seen in a row. We're done!
-                if (startingClose) {
-                    boldClosed = true;
-                    break;
-                }
+        // Leave the reader on the last token taken, since the caller steps
+        // forward once more before looking at anything.
+        this.#index--;
 
-                // If we're not bold, we just need a single star to close this off.
-                startingClose = true;
-                if (bold === false) {
-                    break;
-                }
-            }
+        // A run of stars only emphasises what it hugs. With a space against
+        // the inside of either end, or nothing between them at all, the
+        // stars are just stars.
+        const hugsContent = content !== ""
+            && content.trimStart() === content
+            && content.trimEnd() === content;
 
-            if (startingClose && token.type() !== MarkdownTokenType.Star) {
-                break;
-            }
+        const matched = hugsContent ? Math.min(openers, closers) : 0;
+        if (matched === 0) {
+            return [new Text("*".repeat(openers) + content + "*".repeat(closers))];
+        }
 
-            // Add to string content...
-            if (token.type() === MarkdownTokenType.Text) {
-                textContent += token.lexeme();
-                validClose = true;
-            }
+        const style: TextStyleConfig = {};
+        if (matched >= 2) {
+            style.weight = FontWeight.Bold;
+        } else {
+            style.style = FontStyle.Italic;
+        }
 
-            if (token.type() === MarkdownTokenType.Space) {
-                textContent += token.lexeme();
-                validClose = false;
-            }
+        // Stars past the pair that matched were never part of the emphasis,
+        // so they stay on the line as the characters they are.
+        const runs = new Array<Text>();
+        if (openers > matched) {
+            runs.push(new Text("*".repeat(openers - matched)));
+        }
+        runs.push(new Text(content, style));
+        if (closers > matched) {
+            runs.push(new Text("*".repeat(closers - matched)));
+        }
+        return runs;
+    }
 
-            token = this.#next();
+    /** Consumes a run of stars, leaving the reader on the token after it. */
+    #runOfStars(): number {
+        let count = 0;
+        while (this.#current()?.type() === MarkdownTokenType.Star) {
+            count++;
+            this.#inc();
         }
+        return count;
+    }
 
-        const style: TextStyleConfig = {}
+    /**
+     * Reads `code` up to the closing backtick on the same line. An opening
+     * backtick with no partner is only a backtick.
+     */
+    #inlineCode(): Array<Text> {
+        const opened = this.#index;
 
-        if (validClose && startingClose) {
-            if (boldClosed) {
-                style.weight = FontWeight.Bold;
-            } else {
-                style.style = FontStyle.Italic;
+        this.#inc();
+        let content = "";
+        while (true) {
+            const token = this.#current();
+            if (token === null || token.type() === MarkdownTokenType.NewLine) {
+                this.#index = opened;
+                return [new Text("`")];
             }
+            if (token.type() === MarkdownTokenType.BackTick) {
+                break;
+            }
+            content += token.lexeme();
+            this.#inc();
         }
 
-        return [new Text(textContent, style)]
+        return [new Text(content, { font: "monospace" })];
     }
 
     #text(): Array<Text> {
@@ -153,13 +175,16 @@ export class MarkdownSyntaxParser {
                     break;
 
                 case MarkdownTokenType.Star:
+                case MarkdownTokenType.BackTick:
                     if (textContent !== "") {
                         contents.push(new Text(textContent))
                         textContent = "";
                     }
-                    let starText = this.#emphasis()
-                    for (let i = 0; i < starText.length; i++) {
-                        contents.push(starText[i]);
+                    const runs = token.type() === MarkdownTokenType.Star
+                        ? this.#emphasis()
+                        : this.#inlineCode();
+                    for (let i = 0; i < runs.length; i++) {
+                        contents.push(runs[i]);
                     }
                     break;
             }

package/src/minimap.ts

@@ -0,0 +1,178 @@
+import { Camera } from "./camera";
+import { FlowNode } from "./node";
+import { Theme } from "./theme";
+import { Box, InBox } from "./types/box";
+import { Vector2 } from "./types/vector2";
+
+export interface MinimapConfig {
+    enabled?: boolean;
+    width?: number;
+    height?: number;
+    margin?: number;
+
+    /** Overrides Theme.Minimap.BackgroundColor for this minimap alone. */
+    backgroundColor?: string;
+
+    /** Overrides Theme.Minimap.BorderColor for this minimap alone. */
+    borderColor?: string;
+
+    /** Overrides Theme.Minimap.NodeColor for this minimap alone. */
+    nodeColor?: string;
+
+    /** Overrides Theme.Minimap.ViewportColor for this minimap alone. */
+    viewportColor?: string;
+}
+
+export class Minimap {
+
+    #enabled: boolean;
+
+    #width: number;
+
+    #height: number;
+
+    #margin: number;
+
+    #backgroundColor?: string;
+
+    #borderColor?: string;
+
+    #nodeColor?: string;
+
+    #viewportColor?: string;
+
+    #box: Box = { Position: { x: 0, y: 0 }, Size: { x: 0, y: 0 } };
+
+    #scale: number = 1;
+
+    #originX: number = 0;
+
+    #originY: number = 0;
+
+    // The padding the last frame was laid out with, so a click maps back
+    // through the same geometry it was drawn with.
+    #padding: number = Theme.Minimap.Padding;
+
+    #drawn: boolean = false;
+
+    constructor(config?: MinimapConfig) {
+        this.#enabled = config?.enabled === true;
+        this.#width = config?.width === undefined ? 200 : config.width;
+        this.#height = config?.height === undefined ? 150 : config.height;
+        this.#margin = config?.margin === undefined ? 16 : config.margin;
+        this.#backgroundColor = config?.backgroundColor;
+        this.#borderColor = config?.borderColor;
+        this.#nodeColor = config?.nodeColor;
+        this.#viewportColor = config?.viewportColor;
+    }
+
+    enabled(): boolean {
+        return this.#enabled;
+    }
+
+    setEnabled(enabled: boolean): void {
+        this.#enabled = enabled;
+        this.#drawn = false;
+    }
+
+    contains(position: Vector2): boolean {
+        return this.#enabled && this.#drawn && InBox(this.#box, position);
+    }
+
+    graphPositionOf(position: Vector2, out: Vector2): void {
+        out.x = (position.x - this.#box.Position.x - this.#padding) / this.#scale + this.#originX;
+        out.y = (position.y - this.#box.Position.y - this.#padding) / this.#scale + this.#originY;
+    }
+
+    render(ctx: CanvasRenderingContext2D, canvas: HTMLCanvasElement, camera: Camera, nodes: Array<FlowNode>): void {
+        if (!this.#enabled) {
+            this.#drawn = false;
+            return;
+        }
+
+        // Bounds are taken with a fresh camera so they come back in graph
+        // space rather than wherever the real camera happens to be looking.
+        const flat = new Camera();
+        let minX = Infinity, minY = Infinity, maxX = -Infinity, maxY = -Infinity;
+
+        const boxes: Array<Box> = [];
+        for (let i = 0; i < nodes.length; i++) {
+            const bounds = nodes[i].calculateBounds(ctx, flat);
+            boxes.push(bounds);
+            minX = Math.min(minX, bounds.Position.x);
+            minY = Math.min(minY, bounds.Position.y);
+            maxX = Math.max(maxX, bounds.Position.x + bounds.Size.x);
+            maxY = Math.max(maxY, bounds.Position.y + bounds.Size.y);
+        }
+
+        // What the camera can currently see, so the graph never scales out
+        // from under the viewport box.
+        const topLeft: Vector2 = { x: 0, y: 0 };
+        const bottomRight: Vector2 = { x: 0, y: 0 };
+        camera.screenSpaceToGraphSpace({ x: 0, y: 0 }, topLeft);
+        camera.screenSpaceToGraphSpace({ x: canvas.width, y: canvas.height }, bottomRight);
+
+        minX = Math.min(minX, topLeft.x);
+        minY = Math.min(minY, topLeft.y);
+        maxX = Math.max(maxX, bottomRight.x);
+        maxY = Math.max(maxY, bottomRight.y);
+
+        if (!isFinite(minX) || maxX <= minX || maxY <= minY) {
+            this.#drawn = false;
+            return;
+        }
+
+        this.#box.Size.x = this.#width;
+        this.#box.Size.y = this.#height;
+        this.#box.Position.x = canvas.width - this.#width - this.#margin;
+        this.#box.Position.y = canvas.height - this.#height - this.#margin;
+
+        this.#padding = Theme.Minimap.Padding;
+
+        const usableWidth = this.#width - (this.#padding * 2);
+        const usableHeight = this.#height - (this.#padding * 2);
+        this.#scale = Math.min(usableWidth / (maxX - minX), usableHeight / (maxY - minY));
+        this.#originX = minX;
+        this.#originY = minY;
+
+        const left = this.#box.Position.x + this.#padding;
+        const top = this.#box.Position.y + this.#padding;
+        const toMapX = (x: number) => left + ((x - minX) * this.#scale);
+        const toMapY = (y: number) => top + ((y - minY) * this.#scale);
+
+        ctx.fillStyle = this.#backgroundColor ?? Theme.Minimap.BackgroundColor;
+        ctx.strokeStyle = this.#borderColor ?? Theme.Minimap.BorderColor;
+        ctx.lineWidth = 1;
+        ctx.beginPath();
+        ctx.roundRect(
+            this.#box.Position.x,
+            this.#box.Position.y,
+            this.#width,
+            this.#height,
+            Theme.Minimap.BorderRadius,
+        );
+        ctx.fill();
+        ctx.stroke();
+
+        ctx.fillStyle = this.#nodeColor ?? Theme.Minimap.NodeColor;
+        for (let i = 0; i < boxes.length; i++) {
+            const b = boxes[i];
+            ctx.fillRect(
+                toMapX(b.Position.x),
+                toMapY(b.Position.y),
+                Math.max(1, b.Size.x * this.#scale),
+                Math.max(1, b.Size.y * this.#scale),
+            );
+        }
+
+        ctx.fillStyle = this.#viewportColor ?? Theme.Minimap.ViewportColor;
+        ctx.fillRect(
+            toMapX(topLeft.x),
+            toMapY(topLeft.y),
+            Math.max(1, (bottomRight.x - topLeft.x) * this.#scale),
+            Math.max(1, (bottomRight.y - topLeft.y) * this.#scale),
+        );
+
+        this.#drawn = true;
+    }
+}