text widget. can now intercept file drops on a per node basis

EliCDavis · Oct 7, 2024 · f3a37ca · f3a37ca
1 parent be6b339
commit f3a37ca
Show file tree

Hide file tree

Showing 11 changed files with 203 additions and 21 deletions.
diff --git a/index.html b/index.html
@@ -102,6 +102,23 @@
                                         type: "color"
                                     }
                                 ]
+                            },
+                            "widgets/text": {
+                                title: "Text Node",
+                                widgets: [
+                                    {
+                                        type: "text",
+                                        config: {
+                                            value: "Arbitrary Text"
+                                        }
+                                    }
+                                ],
+                                outputs: [
+                                    {
+                                        name: "out",
+                                        type: "color"
+                                    }
+                                ]
                             }
                         }
                     },

diff --git a/src/graph.ts b/src/graph.ts
@@ -80,6 +80,15 @@ class GraphView {
         }
     }
 
+    fileDrop(file: File): boolean {
+        for (let i = this.#subsystems.length - 1; i >= 0; i--) {
+            if (this.#subsystems[i].fileDrop(file)) {
+                return true;
+            }
+        }
+        return false;
+    }
+
     openContextMenu(ctx: CanvasRenderingContext2D, position: Vector2): ContextMenuConfig {
         let finalConfig: ContextMenuConfig = {};
 
@@ -220,6 +229,10 @@ export class NodeFlowGraph {
 
     #fileDrop(file: File): void {
 
+        if (this.currentView().fileDrop(file)) {
+            return;
+        }
+
         const contents = file.name.split('.');
         const extension = contents[contents.length - 1];
         if (extension !== "jpg" && extension !== "jpeg" && extension !== "png") {

diff --git a/src/graphSubsystem.ts b/src/graphSubsystem.ts
@@ -24,5 +24,7 @@ export interface GraphSubsystem {
 
     mouseDragEvent(delta: Vector2, scale: number): boolean;
 
+    fileDrop(file: File): boolean;
+
     clickEnd(): void;
 }
diff --git a/src/node.ts b/src/node.ts
@@ -57,6 +57,7 @@ export interface FlowNodeConfig {
     onRelease?: () => void;
     onSelect?: () => void;
     onUnselect?: () => void;
+    onFileDrop?: (file: File) => void;
 
     // Widgets
     widgets?: Array<WidgetConfig>;
@@ -110,9 +111,11 @@ export class FlowNode {
 
     // Callbacks
 
-    #onSelect?: () => void;
+    #onSelect: Array<() => void>;
 
-    #onUnselect?: () => void;
+    #onUnselect: Array<() => void>;
+
+    #onFiledrop: Array<(file: File) => void>;
 
     // Styling ================================================================
 
@@ -160,8 +163,21 @@ export class FlowNode {
         this.#contextMenu = config?.contextMenu === undefined ? null : config.contextMenu;
 
         this.#selected = false;
-        this.#onSelect = config?.onSelect;
-        this.#onUnselect = config?.onUnselect;
+        this.#onSelect = new Array<() => void>;
+        this.#onUnselect = new Array<() => void>;
+        this.#onFiledrop = new Array<(file: File) => void>;
+
+        if (config?.onSelect) {
+            this.#onSelect.push(config?.onSelect);
+        }
+
+        if (config?.onUnselect) {
+            this.#onUnselect.push(config?.onUnselect);
+        }
+
+        if (config?.onFileDrop) {
+            this.#onFiledrop.push(config?.onFileDrop);
+        }
 
         this.#position = config?.position === undefined ? { x: 0, y: 0 } : config.position;
         this.#title = new Text(
@@ -237,8 +253,8 @@ export class FlowNode {
             return;
         }
         this.#selected = true;
-        if (this.#onSelect) {
-            this.#onSelect();
+        for (let i = 0; i < this.#onSelect.length; i++) {
+            this.#onSelect[i]();
         }
     }
 
@@ -390,9 +406,9 @@ export class FlowNode {
                             ],
                             onUpdate: (data: Array<any>) => {
                                 this.addWidget(new ImageWidget({
-                                  image: data[0],
-                                  maxWidth: data[1],
-                                  maxHeight: data[2],
+                                    image: data[0],
+                                    maxWidth: data[1],
+                                    maxHeight: data[2],
                                 }));
                             }
                         }).Show();
@@ -510,11 +526,29 @@ export class FlowNode {
             return;
         }
         this.#selected = false;
-        if (this.#onUnselect) {
-            this.#onUnselect();
+        for (let i = 0; i < this.#onUnselect.length; i++) {
+            this.#onUnselect[i]();
         }
     }
 
+    public addUnselectListener(callback: () => void): void {
+        this.#onUnselect.push(callback);
+    }
+
+    public addSelectListener(callback: () => void): void {
+        this.#onSelect.push(callback);
+    }
+
+    public dropFile(file: File): void {
+        for(let i = 0; i < this.#onFiledrop.length; i ++) {
+            this.#onFiledrop[i](file);
+        }
+    }
+
+    public addFileDropListener(callback: (file: File) => void): void {
+        this.#onFiledrop.push(callback);
+    }
+
     public locked(): boolean {
         return this.#locked;
     }
@@ -601,6 +635,14 @@ export class FlowNode {
         this.#widgets.push(widget);
     }
 
+    getWidget(index: number): Widget {
+        return this.#widgets[index];
+    }
+
+    widgetCount(): number {
+        return this.#widgets.length;
+    }
+
     translate(delta: Vector2): void {
         this.#position.x += delta.x;
         this.#position.y += delta.y;
@@ -653,9 +695,9 @@ export class FlowNode {
     }
 
     setTitle(newTitle: string): void {
-        if (!this.#canEdit) {
-            console.warn("setTitle instruction ignored, as node has been marked un-editable");
-        }
+        // if (!this.#canEdit) {
+        //     console.warn("setTitle instruction ignored, as node has been marked un-editable");
+        // }
         this.#title.set(newTitle);
     }
 

diff --git a/src/nodes/subsystem.ts b/src/nodes/subsystem.ts
@@ -4,7 +4,6 @@ import { RenderResults } from "../graphSubsystem";
 import { FlowNode, NodeState } from "../node";
 import { Organize } from "../organize";
 import { TimeExecution } from "../performance";
-import { SetStringPopup } from "../popups/string";
 import { Port } from "../port";
 import { CursorStyle } from "../styles/cursor";
 import { List } from "../types/list";
@@ -311,6 +310,14 @@ export class NodeSubsystem {
         this.#nodes.push(node);
     }
 
+    fileDrop(file: File): boolean {
+        if (this.#nodeHovering === -1) {
+            return false;
+        }
+        this.#nodes[this.#nodeHovering].dropFile(file);
+        return true;
+    }
+
     #removeNodeConnections(nodeIndex: number): void {
         if (nodeIndex >= this.#nodes.length || nodeIndex < 0) {
             console.error("invalid node connection");

diff --git a/src/notes/subsystem.ts b/src/notes/subsystem.ts
@@ -120,6 +120,10 @@ export class NoteSubsystem {
         return true;
     }
 
+    fileDrop(file: File): boolean {
+        return false;
+    }
+
     #removeNote(note: FlowNote): void {
         const index = this.#notes.indexOf(note);
         if (index > -1) {

diff --git a/src/popups/form.ts b/src/popups/form.ts
@@ -19,9 +19,12 @@ interface Config {
 export function FormPopup(config: Config): Popup {
     let input = new Array<HTMLInputElement | null>();
 
+    const setOption = "Set";
+    const cancelOption = "Cancel";
+
     return new Popup({
         title: config.title,
-        options: ["Set", "Cancel"],
+        options: [setOption, cancelOption],
         content: () => {
             const container = document.createElement('div');
             container.style.flexDirection = "column";
@@ -43,7 +46,7 @@ export function FormPopup(config: Config): Popup {
             return container;
         },
         onClose: (button: string | null): void => {
-            if (button !== "Set" || input === null) {
+            if (button !== setOption || input === null) {
                 if (config.onCancel) {
                     config.onCancel();
                 }

diff --git a/src/widgets/factory.ts b/src/widgets/factory.ts
@@ -7,6 +7,7 @@ import { StringWidget, StringWidgetConfig } from './string';
 import { ToggleWidget, ToggleWidgetConfig } from './toggle';
 import { FlowNode } from "../node";
 import { ImageWidget, ImageWidgetConfig } from "./image";
+import { TextWidget, TextWidgetConfig } from "./text";
 
 export type WidgetBuilder = (node: FlowNode, confg?: any) => Widget;
 
@@ -40,5 +41,6 @@ GlobalWidgetFactory.register("slider", (node: FlowNode, config?: SliderWidgetCon
 GlobalWidgetFactory.register("string", (node: FlowNode, config?: StringWidgetConfig) => new StringWidget(node, config));
 GlobalWidgetFactory.register("toggle", (node: FlowNode, config?: ToggleWidgetConfig) => new ToggleWidget(node, config));
 GlobalWidgetFactory.register("image", (node: FlowNode, config?: ImageWidgetConfig) => new ImageWidget(config));
+GlobalWidgetFactory.register("text", (node: FlowNode, config?: TextWidgetConfig) => new TextWidget(node, config));
 
 export { GlobalWidgetFactory };
diff --git a/src/widgets/number.ts b/src/widgets/number.ts
@@ -90,7 +90,7 @@ export class NumberWidget {
         }
 
         // https://stackoverflow.com/questions/5765398/whats-the-best-way-to-convert-a-number-to-a-string-in-javascript
-        this.#text = '' + this.#value;
+        this.#text = '' + parseFloat(this.#value.toPrecision(6));
     }
 
     ClickStart(): void {
@@ -99,9 +99,11 @@ export class NumberWidget {
     ClickEnd(): void {
         let input: HTMLInputElement | null = null;
 
+        const setOption = "Set";
+        const cancelOption = "Cancel";
         const popup = new Popup({
             title: "Set Number",
-            options: ["Set", "Cancel"],
+            options: [setOption, cancelOption],
             content: () => {
                 const container = document.createElement('div');
                 input = document.createElement('input')
@@ -111,7 +113,7 @@ export class NumberWidget {
                 return container;
             },
             onClose: (button: string | null): void => {
-                if (button !== "Set" || input === null) {
+                if (button !== setOption || input === null) {
                     return;
                 }
 

diff --git a/src/widgets/string.ts b/src/widgets/string.ts
@@ -1,5 +1,4 @@
 import { Theme } from "../theme";
-import { Popup } from "../popup";
 import { TextBoxStyle, TextBoxStyleConfig, TextBoxStyleWithFallback } from "../styles/textBox";
 import { Box, InBox } from "../types/box";
 import { Vector2 } from "../types/vector2";

diff --git a/src/widgets/text.ts b/src/widgets/text.ts
@@ -0,0 +1,91 @@
+import { Theme } from "../theme";
+import { Box, InBox } from "../types/box";
+import { Vector2 } from "../types/vector2";
+import { FlowNode } from '../node';
+import { Text } from "../types/text";
+import { TextStyle, TextStyleConfig, TextStyleFallback } from "../styles/text";
+
+export interface TextWidgetConfig {
+    property?: string;
+
+    value?: string;
+
+    textBoxStyle?: TextStyleConfig;
+
+    callback?: (newString: string) => void;
+}
+
+export class TextWidget {
+
+    #value: Text;
+
+    #callback?: (newString: string) => void;
+
+    #node: FlowNode
+
+    #nodeProperty: string | undefined;
+
+    #size: Vector2;
+
+    constructor(node: FlowNode, config?: TextWidgetConfig) {
+        this.#size = { x: 0, y: 0 };
+        this.#node = node;
+        this.#nodeProperty = config?.property;
+        this.#value = new Text("", TextStyleFallback(config?.textBoxStyle, {
+            font: Theme.FontFamily,
+            color: Theme.Widget.FontColor,
+            size: Theme.Note.FontSize,
+        }))
+
+        this.Set(config?.value === undefined ? "" : config?.value);
+        this.#callback = config?.callback;
+        if (this.#nodeProperty !== undefined) {
+            this.#node.subscribeToProperty(this.#nodeProperty, (oldVal, newVal) => {
+                this.Set(newVal);
+            });
+        }
+    }
+
+    Size(): Vector2 {
+        return this.#size;
+    }
+
+    Set(value: string): void {
+        if (this.#value.get() === value) {
+            return;
+        }
+        this.#value.set(value);
+
+        if (this.#nodeProperty !== undefined) {
+            this.#node.setProperty(this.#nodeProperty, value)
+        }
+
+        if (this.#callback !== undefined) {
+            this.#callback(value);
+        }
+    }
+
+    ClickStart(): void {
+        // Left blank for implementing Widget interface
+    }
+
+    ClickEnd(): void {
+        // Left blank for implementing Widget interface
+    }
+
+
+    Draw(ctx: CanvasRenderingContext2D, position: Vector2, scale: number, mousePosition: Vector2 | undefined): Box {
+        this.#value.size(ctx, scale, this.#size);
+        const box = {
+            Position: position,
+            Size: this.#size
+        };
+        this.#value.size(ctx, 1, this.#size);
+
+        ctx.textAlign = "left";
+        this.#value.render(ctx, scale, box.Position);
+        // this.#idleStyle.DrawUnderline(ctx, box, scale, fitString(ctx, this.#value, box.Size.x - (20 * scale)))
+
+        return box;
+    }
+}